Flex3：自定義項目渲染器不偵聽父級調度的事件

Question

我有一個帶有自定義ItemRenderer的列表。 ItemRenderer包含一個復選框和一個標簽。 具有列表的組件具有“全選”復選框。 選中“全選”復選框后，它將調度一個事件，每個項目都應偵聽以便選擇自己的復選框。 將eventlistener添加到每個項目的creationComplete上，並且在選中“全選”復選框時會正確調度該事件，但是自定義ItemRenderer中的偵聽器不會偵聽。

如何使ItemRenderer偵聽在其父級中調度的事件？

我將添加一些代碼示例來闡明：

------- container ----------
<mx:VBox>
   <mx:Script>
      <![CDATA[
         public var user1 = new User(1, "Jack");
         public var user2 = new User(2, "John");
         public var user3 = new User(3, "Mary");

         [Bindable]
         public var users:ArrayCollection = new ArrayCollection([user1], [user2], [user3]);

         public static const SELECT_ALL_USERS:String = "selectAllUsers";

         private function selectAllChangeHandler():void
         {
            if (selectAll.selected)
               dispatchEvent(new Event(SELECT_ALL_USERS,true));
         }
      ]]>
   </mx:Script>
   <mx:CheckBox id="selectAll" change="{selectAllChangeHandler()}" />
   <mx:List dataProvider="{users}" itemRenderer="myRenderer" />
</mx:VBox>


------- renderer ----------
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox creationComplete="{init()}">
   <mx:Script>
      <![CDATA[
         private function init():void
         {
            addEventListener (Container.SELECT_ALL, selectAllHandler, false, 0, true);
         }

         private function selectAllHandler():void
         {
            checkbox.selected=true;
         }

         private function selected(id:int):Boolean
         {
             return id==1 || id==3;
         }
      ]]>
   </mx:Script>

   <mx:CheckBox id="checkbox" selected="{selected(data.id)}" />
   <mx:Label text="{data.name}" />
</mx:HBox>

請注意，用戶ArrayCollection或其包含的用戶對象無法更改，因為稍后需要這些值。 因此，當單擊“ selectAll”時，也應選中列表中的每個復選框。

Answer 1

您的自定義ItemRenderer不應在其父級中注冊事件監聽器，而應在“全選”復選框中注冊，即

theCheckbox.addEventListener(YourEvent.YOUR_EVENT, itemRendererSelectAllHandler);

如果失敗，您是否可以發布添加事件偵聽器並從復選框分派事件的代碼？

編輯：

這是您的錯誤：在渲染器的init（）中，您需要向添加事件的容器添加事件偵聽器，而不是將其添加到渲染器。 因此，使一個

container.addEventListener(Container.SELECT_ALL_USERS, selectAllHandler, false, 0, true);

Answer 2

在flex中進行全選並不復雜，但是我將告訴您我們的操作方式，並且效果很好。

我們創建了一個名為“ ExList”的列表派生控件，該控件具有屬性“ selectAllCB”，將其綁定到現有復選框，該復選框適用於選擇所有邏輯。 請注意，當我們設置selectAllCB屬性時，我們使ExList監聽復選框的事件。

選中復選框時，我們將selectedItems數組手動設置為dataProvider的數組，並且所有項目均被選中。

使用itemRenderer不能正常工作，因為當您一次又一次地對列表進行編程時，每次必須編寫大量代碼。

I am attaching some sample code here below..

    public class ExList extends List 
    {
        public function ExTileList()
        {
            super();
            this.allowMultipleSelection = true;
        }

        private var _selectAllCB:CheckBox = null;
        [Bindable]
        public function get selectAllCB():CheckBox
        {
            return _selectAllCB;
        }
        public function set selectAllCB(v:CheckBox):void
        {
            if(v==null)
                return;
            _selectAllCB = v;
            v.addEventListener(ListEvent.ITEM_CLICK, handleAllChange,false, 0 , true);
            v.addEventListener("change", handleAllChange,false, 0 , true);
        }

        private function handleAllChange(e:Event):void
        {
            if(_selectAllCB.selected)
            {
                this.selectedItems = this.dataProvider.toArray();
            }
            else
            {
                this.selectedItems = new Array();
            }
        }
}

您可以將其用作...

<CheckBox id="sAll"/>
<ExList selectAllCB="{sAll}"/>

// Please note its in curly braces

Answer 3

這是我實現解決方案的方式：

    <?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" height="150" verticalGap="0">
    <mx:Script>
 <![CDATA[
         import mx.events.ListEvent;
  import mx.controls.CheckBox;
  import mx.collections.ArrayCollection;

  public var listData:ArrayCollection;

  private function selectAll():void
  {
   listChkBox.selectedItems = listData.toArray();
   for each (var item:Object in listChkBox.selectedItems)
   {
    CheckBox(listChkBox.itemToItemRenderer(item)).selected = true;
          }   
  }

  private function resetAll():void
  {
   listChkBox.selectedItems = listData.toArray();
   for each (var item:Object in listChkBox.selectedItems)
   { 
                         CheckBox(listChkBox.itemToItemRenderer(item)).selected = false;
   } 
  }


  ]]>
 </mx:Script>
 <mx:List width="100%" height="100%" id="listChkBox" labelField="name" allowMultipleSelection="true"
   dataProvider="{listData}"  selectionColor="#FFFFFF" >
  <mx:itemRenderer>
   <mx:Component>
    <mx:CheckBox >
    </mx:CheckBox>
   </mx:Component>
  </mx:itemRenderer>
 </mx:List>
 <mx:HBox width="100%"  backgroundColor="#E2DEDE" paddingBottom="2" paddingLeft="2" paddingTop="2" paddingRight="2" borderStyle="solid">
  <mx:Button label="All"  id="btnAll" click="selectAll()" />
  <mx:Button label="None" click="resetAll()"/>
 </mx:HBox>
</mx:VBox>

Answer 4

一種簡單的解決方案是在要顯示的數據列表中使用類型化的對象，然后利用數據綁定和綁定實用程序來捕獲對項目渲染器上基礎數據屬性的更改。 當對象中的某些屬性發生更改以反映“全選/全選”狀態時，重寫項目渲染器中的“設置數據”功能以執行所需的任何操作。