Spark List ItemRenderer選擇狀態問題

Question

一個問題是，即使設置爲requireSelection爲false，在List中選擇所有項時，List仍然有一個項爲selectedAndShowsCaret。對於此示例，懸停顏色爲黃色，所選顏色爲紅色，selectedAndShowsCaret爲藍色。

的另一個問題是，即使設置將selectedIndices到空，selectedItems仍然不會被更新。下面有3個項目，在取消選中全選複選框，則selectedItems.length仍然是3

以下是代碼：

<?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" 

    xmlns:components="components.*" 

    creationComplete="init()" 

    > 

    <fx:Script> 

     <![CDATA[ 

      import mx.collections.ArrayCollection; 
      [Bindable] 
      private var _dataProvider:ArrayCollection; 

      private function init():void { 
       generateList(); 
      } 

      private function generateList():void { 
       var items:Array = []; 

       for (var i:int = 0; i<3; i++) { 
        items.push(i); 
       } 

       _dataProvider = new ArrayCollection(items); 

      } 

      private function selectAllChange():void { 

       var selected:Boolean = selectAll.selected; 

       var result:Vector.<int> = new Vector.<int>(); 

       var count:int = _dataProvider.length; 

       for (var i:int = 0; i< count; i++) { 

        result[i] = i; 

       } 

       selected ? list.selectedIndices = result : list.selectedIndices = new Vector.<int>(); 

       //NOTE: when all the items is selected, the selectedItems is still empty 

       trace(list.selectedItems.length); 

      } 

     ]]> 

    </fx:Script> 

    <s:layout> 

     <s:VerticalLayout horizontalAlign="center"/> 

    </s:layout> 

    <s:CheckBox id="selectAll" label="Select All" change="selectAllChange()"/> 

    <components:CustomerList 

     id="list" 

     borderColor="#000000" 

     contentBackgroundColor="#cccccc" 

     requireSelection="false" 

     dataProvider="{_dataProvider}" 

     allowMultipleSelection="true" 

     itemRenderer="components.itemRenderer.DemoItemRenderer" 

     > 

     <components:layout> 

      <s:VerticalLayout paddingLeft="10" paddingRight="10"/> 

     </components:layout> 

    </components:CustomerList> 

</s:Application> 

DemoItemRenderer：

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 

       xmlns:s="library://ns.adobe.com/flex/spark" 

       width="50" height="100" 

       autoDrawBackground="false" 

       > 

    <s:states> 

     <s:State name="normal" /> 

     <s:State name="hovered" /> 

     <s:State name="selected" /> 

     <s:State name="dragging"/> 

     <s:State name="normalAndShowsCaret" stateGroups="caret" /> 

     <s:State name="hoveredAndShowsCaret" stateGroups="caret" /> 

     <s:State name="selectedAndShowsCaret" stateGroups="caret" /> 

    </s:states> 



    <fx:Script> 

     <![CDATA[ 

      override public function set data(value:Object):void { 
       super.data = value; 
       if (data == null){ 
        return; 
       } 
       txt.text = String(data); 
      } 

      override protected function getCurrentRendererState():String { 

       currentState = super.getCurrentRendererState(); 

       trace(currentState); 

       return super.getCurrentRendererState(); 
      } 
     ]]> 

    </fx:Script> 

    <!--selected: red, selectedAndShowsCaret: blue, hovered: yellow--> 

    <s:Rect width="100%" height="100%" includeIn="selected, selectedAndShowsCaret"> 
     <s:fill> 
      <s:SolidColor color.selected="#ff0000" color.selectedAndShowsCaret="#00ffff"/> 
     </s:fill> 
    </s:Rect> 

    <s:Rect width="100%" height="100%" includeIn="hovered"> 
     <s:fill> 
      <s:SolidColor color="#ffff00"/> 
     </s:fill> 
    </s:Rect> 

    <s:Label color="#000000" id="txt" horizontalCenter="0" verticalCenter="0" visible.dragging="false"/> 

</s:ItemRenderer> 

Answer 1

對於第二個問題，這個selectAll（）函數適用於我：

 protected function selectAll():void{ 

      if(select.selected){      
       var indexVector:Vector.<int> = new Vector.<int>(); 
       for(var i:int= 0; i<list.dataProvider.length;i++) 
       {   
        indexVector.push(i); 
       }     


       list.selectedIndices = indexArray; 
       list.addEventListener(FlexEvent.UPDATE_COMPLETE, list_updateCompleteHandler); 


      } else { 
       list.selectedIndex = -1; 
       list.addEventListener(FlexEvent.UPDATE_COMPLETE, list_updateCompleteHandler); 

      } 


     } 

     private function list_updateCompleteHandler(event:FlexEvent):void{ 
      list.removeEventListener(FlexEvent.UPDATE_COMPLETE, list_updateCompleteHandler); 
      trace(list.selectedItems); 
     }