Flex 4.6：爲列表中的按鈕製作動作

Question

我是Flex的初學者。我的問題時添加按鈕列出，我把按鈕，在itemrender但navigator.pushView(views.Listde,ProblemsList.selectedItem); 動作讓未定義的屬性導航的錯誤」接取

代碼：

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark"> 
<fx:Script> 
    <![CDATA[ 
     import views.ButList; 

     protected function button1_clickHandler(event:MouseEvent):void 
     { 
      // TODO Auto-generated method stub 
      navigator.pushView(views.Listde,ProblemsList.selectedItem); 
     } 

    ]]> 
</fx:Script> 

<s:Group width="100%" height="100%" styleName="PCS.css"> 
    <s:HGroup width="100%" height="100%" gap="2" verticalAlign="middle" horizontalAlign="center" paddingBottom="5" paddingLeft="5" 
       paddingRight="5" paddingTop="5"> 
     <s:HGroup width="30%" height="100%" verticalAlign="middle" horizontalAlign="center"> 
      <s:Label text="{data._AddedDate}" textAlign="left" verticalAlign="bottom" width="100%" height="100%"/> 
     </s:HGroup> 
     <s:VGroup width="50%" height="100%" verticalAlign="middle" horizontalAlign="right"> 
      <s:BitmapImage source="images/{data.image}"/> 
      <s:TextArea editable="false" text="{data.description}"/> 
      <s:Label text="{data.price}"/> 
      <s:Button label="s" click="button1_clickHandler(event)"/>     
     </s:VGroup> 
    </s:HGroup> 
</s:Group> 

如果任何解決方案來解決它通過列表或任何組件而不是列表，然後我希望按鈕導航到查看與選定的項目和列表的變化導航到另一個視圖與選定的項目也然後更改列表工作成功，但按鈕操作不能與導航器一起定義。

在此先感謝尋求幫助。

Answer 1

使用data屬性創建一個自定義事件，並從項目渲染器派發事件，或者在單擊該按鈕時從項目渲染器派發列表更改事件。

package myEvents 
{ 
import flash.events.Event; 

public class CustomEvent extends Event 
{ 
    public function CustomEvent(type:String, 
     data:Object=null) { 
      // Call the constructor of the superclass. 
      super(type); 

      // Set the new property. 
      this.data = data; 
    } 

    // Define static constant. 
    public static const MY_BUTTON_CLICKED:String = "myButtonClicked"; 

    // Define a public variable to hold the state of the enable property. 
    public var data:Object; 

    // Override the inherited clone() method. 
    override public function clone():Event { 
     return new CustomEvent(type, data); 
    } 
    } 
} 

MyItemRenderer.mxml

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark"> 
<fx:Script> 
    <![CDATA[ 
     import views.ButList; 

     protected function button1_clickHandler(event:MouseEvent):void 
     { 
      // dispatch a custom 
      (this.owner as List).dispatchEvent(new CustomEvent(CustomEvent.MY_BUTTON_CLICKED, data)); 
      //navigator.pushView(views.Listde,ProblemsList.selectedItem); 
     } 

    ]]> 
</fx:Script> 

<s:Group width="100%" height="100%" styleName="PCS.css"> 
    <s:HGroup width="100%" height="100%" gap="2" verticalAlign="middle" horizontalAlign="center" paddingBottom="5" paddingLeft="5" 
       paddingRight="5" paddingTop="5"> 
     <s:HGroup width="30%" height="100%" verticalAlign="middle" horizontalAlign="center"> 
      <s:Label text="{data._AddedDate}" textAlign="left" verticalAlign="bottom" width="100%" height="100%"/> 
     </s:HGroup> 
     <s:VGroup width="50%" height="100%" verticalAlign="middle" horizontalAlign="right"> 
      <s:BitmapImage source="images/{data.image}"/> 
      <s:TextArea editable="false" text="{data.description}"/> 
      <s:Label text="{data.price}"/> 
      <s:Button label="s" click="button1_clickHandler(event)"/>     
     </s:VGroup> 
    </s:HGroup> 
</s:Group> 

您的視圖類

<?xml version="1.0" encoding="utf-8"?> 

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
title="MY View"> 
<s:layout> 
    <s:VerticalLayout paddingTop="10"/> 
</s:layout> 

<fx:Script> 
    <![CDATA[ 
     import spark.events.IndexChangeEvent; 

     private function onListCreationComplete_Handler():void 
     { 
      myList.addEventListener(CustomEvent.MY_BUTTON_CLICKED, onItemRendererButtonClicked); 
     } 

     protected function onItemRendererButtonClicked(event:CustomEvent):void { 
      var data:Object = event.data; 
      navigator.pushView(views.Listde,data);//myList.selectedItem 
     } 

    ]]> 
</fx:Script> 

<s:Label text="Select an view"/> 
<s:List id="myList" 
    width="100%" height="100%" 
    labelField="firstName" itemRenderer="MyItemRenderer" 
    change="myList_changeHandler(event)" creationComplete="onListCreationComplete_Handler()"> 
    <s:ArrayCollection> 
     <fx:Object description="Fruits" image="assets/icons/1.png" _AddedDate="15/05/14" price="154"/> 
     <fx:Object description="New Item" image="assets/icons/2.png" _AddedDate="15/05/14" price="154"/> 
     <fx:Object description="Doll" image="assets/icons/3.png" _AddedDate="15/05/14" price="154"/> 
    </s:ArrayCollection> 
</s:List> 
</s:View> 

我希望這會幫助ü。有大量的例子用於移動設備的列表和項目渲染器。

Answer 2

根據您的ItemRenderer，您可以簡單地收聽您的View中的IndexChangeEvent。在這種情況下，您根本不需要單獨的按鈕 - 整個ItemRenderer可以充當按鈕。

<?xml version="1.0" encoding="utf-8"?> 

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
title="MY View"> 
    <s:layout> 
     <s:VerticalLayout paddingTop="10"/> 
    </s:layout> 

    <fx:Script> 
     <![CDATA[ 
      import spark.events.IndexChangeEvent; 
      import views.ButList; 

      protected function myList_changeHandler(event:IndexChangeEvent):void { 
       navigator.pushView(views.Listde,myList.selectedItem); 
      } 

     ]]> 
    </fx:Script> 

    <s:Label text="Select an view"/> 
    <s:List id="myList" 
     width="100%" height="100%" 
     labelField="firstName" itemRenderer="MyItemRenderer" 
     change="myList_changeHandler(event)"> 
     <s:ArrayCollection> 
      <fx:Object description="Fruits" image="assets/icons/1.png" _AddedDate="15/05/14" price="154"/> 
      <fx:Object description="New Item" image="assets/icons/2.png" _AddedDate="15/05/14" price="154"/> 
      <fx:Object description="Doll" image="assets/icons/3.png" _AddedDate="15/05/14" price="154"/> 
     </s:ArrayCollection> 
    </s:List> 
</s:View>