Flex 4.6 : 목록에있는 버튼에 대한 작업 수행

Question

저는 Flex에서 초보자입니다. 목록에 버튼을 추가 내 문제는 내가 itemrender의 버튼을 넣어하지만 navigator.pushView(views.Listde,ProblemsList.selectedItem); 의 동작은 정의되지 않은 속성 네비게이터의 오류 "ACESS을

코드 :.

<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

데이터 속성이있는 사용자 지정 이벤트를 만들고 항목 렌더러에서 이벤트를 디스패치하거나 단추를 클릭 할 때 항목 렌더러에서 목록 변경 이벤트를 디스패치하십시오.

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> 

나는이 U 도움이 될 바랍니다. 모바일 용 목록 및 항목 렌더러에는 수많은 예제가 있습니다.

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>