0 Replies Latest reply: Jul 18, 2013 11:28 PM by jasonzhuang RSS

    spark List itemRenderer select state issue

    jasonzhuang

      one issue is that even set requireSelection to false, in the List, when select all items, The List still has one item be selectedAndShowsCaret. For this example, hover color is yellow, selected color is red, selectedAndShowsCaret is blue.

      Another issue is even set selectedIndices to empty, the selectedItems still not be updated. Following has 3 items, when uncheck the selectAll checkbox, the selectedItems.length still be 3.

       

      1.png

       

      <?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 code:

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