Flex3: Custom Item Renderer не прослушивает события, отправленные родителем

Question

У меня есть список с пользовательским ItemRenderer. ItemRenderer содержит флажок и метку. Компонент со списком имеет флажок «Выбрать все». Когда установлен флажок «Выбрать все», он отправляет событие, которое должен прослушивать каждый элемент, чтобы выбрать свой собственный флажок. Eventenerener добавлен в 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

Пользовательские ItemRenderers не должны зарегистрировать слушатель события с их родителей, но с «выбрать все» флажок, т.е.

theCheckbox.addEventListener(YourEvent.YOUR_EVENT, itemRendererSelectAllHandler); 

В противном случае, вы можете разместить свой код, который добавляет прослушиватель событий и которая отправляет событие формирует флажок?

редактировать:

Вот ваша ошибка: В INIT Renderer (в), вам нужно добавить слушатель события не визуализатора, а в контейнер, который отправляет событие. Так что, что

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

Answer 2

Делая выбор все прогибается немного сложным, но я расскажу вам, как мы сделали это, и это прекрасно работает.

Мы создали элемент управления List, называемый 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

Простое решение заключается в использовании типизированных объектов в списке данные, которые вы представляете, а затем использовать привязку данных и привязки для привязки к основным свойствам данных в средстве рендеринга элементов. Переопределите функцию «установить данные» в средстве рендеринга элементов, чтобы сделать все, что вам нужно, когда какое-либо свойство в объекте будет изменено, чтобы отобразить состояние «выбрать все/выберите все».