Flex 4項目管理員名單

Question

我剛開始使用Flex。我知道這很可悲，但這是一個漫長的故事。 現在，我面臨的問題是我有一個列表組件，它上面有一個數據提供器。我想要做的是點擊列表上的項目時，我想在標籤旁邊有一個檢查標記。

以下是部分：

<s:List id="tabList" width="100%" 
         borderVisible="false" click="tabList_clickHandler(event)" 
         selectedIndex="{this.hostComponent.selectedIndex}" 
         itemRenderer="MultiTabListRenderer" /> 

下面的itemRenderer代碼：

protected function AddCheck_clickHandler(event:MouseEvent):void { 
     // TODO Auto-generated method stub 
     var checkLabel:Label; 
     checkLabel = new Label(); 
     checkLabel.text = "checkMark"; 

     var e: ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, true); 
     e.item = data; 
     e.index = itemIndex; 
     dispatchEvent(e); 
     this.checkRectGroup.addElementAt(checkLabel, e.index); 
    } 

<s:Label id="customMultitabList" text="{data.label}" 
      left="10" right="0" top="6" bottom="6" click="AddCheck_clickHandler(event)"/> 

我在函數內部代碼是錯誤的，其主要是由於這樣的事實，我不明白每一切都在彈性。我沒有心情去詳細學習這門語言，因爲這對我來說不是一個長期的工作。另外，在渲染器文件中，當我使用s：List而不是s：label時，我再也看不到標籤了。當然，我用dataprovider = {data.selectedItem}替換屬性文本。

Answer 1

解決此問題的一種方法是向dataProvider中的對象添加一個字段，用於跟蹤是否已選擇該項目。

然後，在您的項目渲染器中，檢查此字段並決定是否顯示覆選標記。這裏有一個工作示例應用程序和渲染器：

應用：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*" 
       creationComplete="application1_creationCompleteHandler(event)"> 
    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 
      import mx.events.CollectionEvent; 
      import mx.events.CollectionEventKind; 
      import mx.events.FlexEvent; 
      import mx.events.PropertyChangeEvent; 
      import mx.events.PropertyChangeEventKind; 

      private var collection:ArrayCollection; 

      protected function application1_creationCompleteHandler(event:FlexEvent):void 
      { 
       collection = new ArrayCollection([ 
        { label: 1, selected: false }, 
        { label: 2, selected: false }, 
        { label: 3, selected: false }]); 

       listbert.dataProvider=collection; 
      } 

      protected function listbert_clickHandler(event:MouseEvent):void 
      { 
       var index:int = listbert.selectedIndex; 
       var item:Object = listbert.selectedItem; 
       item.selected = !item.selected; 
       // Create these events because the items in the ArrayCollection 
       // are generic objects. It shouldn't be necessary if items in 
       // your collection are a Class that extends EventDispatcher 
       // see ArrayList::startTrackUpdates() 
       var e:PropertyChangeEvent = new PropertyChangeEvent(
        PropertyChangeEvent.PROPERTY_CHANGE, false,false, 
        PropertyChangeEventKind.UPDATE, 'selected', !item.selected, 
        item.selected, item); 

       collection.dispatchEvent(new CollectionEvent(
        CollectionEvent.COLLECTION_CHANGE, false,false, 
        CollectionEventKind.UPDATE, index, index, [e])); 
      } 

     ]]> 
    </fx:Script> 

     <s:List id="listbert" click="listbert_clickHandler(event)" itemRenderer="TestRenderer"/> 
</s:Application> 

項渲染：

<?xml version="1.0" encoding="utf-8"?> 
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" > 
    <fx:Script> 
     <![CDATA[ 

      override public function set data(value:Object):void 
      { 
       super.data = value; 
       labelDisplay.text = value.label; 
       if (value.selected) 
        checkMarkLabel.text = "✓"; 
       else 
        checkMarkLabel.text = ""; 
      } 
     ]]> 
    </fx:Script> 

    <s:layout> 
     <s:HorizontalLayout/> 
    </s:layout> 
    <s:Label id="labelDisplay" /> 
    <s:Label id="checkMarkLabel" /> 
</s:ItemRenderer>