0 Replies Latest reply on Nov 5, 2013 1:01 AM by jasonzhuang

    Disable auto adjust selectIndex after ArrayCollection refresh()

    jasonzhuang

      When user click one item in the list and remove it, the list will auto adjust current selectIndex and caretIndex even set selectedIndex = -1. Since user already remove the item, I want the list select no item and not focus on anyItem. If in the removeLast() comments "lastItem.digit = -100; _dataProvider.refresh()", it will works fine.

       

      Before remove "43" item:

      be.png

       

      After remove the "43" item, auto select first item(I want the list has no selected item and no caret item):

      afte.png

       

      Here is the code:

      //===========main==================

      <?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="generateList()"

          >

          <fx:Script>

              <![CDATA[

                  import mx.collections.ArrayCollection;

                  import mx.collections.ISort;

                  import mx.collections.Sort;

                  import mx.events.FlexEvent;

       

                  import spark.events.IndexChangeEvent;

       

                  [Bindable]

                  private var _dataProvider:ArrayCollection;

       

                  private function sortOnDigit(item0:Object, item1:Object, fields:Array = null):int {

                      var value:int = int(item0.digit) - int(item1.digit);

                      return value > 0? 1 :value< 0 ? -1 :0;

                  }

       

                  private function generateList():void {

                      var items:Array = [];

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

                          var digit:int = Math.floor(Math.random()*100);

                          items.push(digit);

                      }

                      _dataProvider = new ArrayCollection(items);

                      var sort:ISort = new Sort();

                      sort.compareFunction = sortOnDigit;

                      _dataProvider.sort = sort;

                      _dataProvider.refresh();

                  }

       

                  private function removeLast():void {

                      var lastItem:Object = _dataProvider.getItemAt(_dataProvider.length -1);

                      lastItem.digit = -100;

                      // Note: MUST refresh

                      _dataProvider.refresh();

                      _dataProvider.removeItemAt(_dataProvider.getItemIndex(lastItem));

                      // =========== NOT WORK ================//

                      list.selectedIndices = new Vector.<int>();

                      list.selectedIndex = -1;

                  }

              ]]>

          </fx:Script>

          <s:layout>

              <s:VerticalLayout horizontalAlign="center"/>

          </s:layout>

          <s:List

              id="list"

              change="selectChange()"

              borderColor="#000000"

              contentBackgroundColor="#cccccc"

              requireSelection="false"

              dataProvider="{_dataProvider}"

              allowMultipleSelection="true"

              itemRenderer="components.DemoItemRenderer"

              >

              <s:layout>

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

              </s:layout>

          </s:List>

          <s:Button label="Remove Item" click="removeLast()"/>

      </s:Application>

       

      // =============compomemts.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.digit);

                  }

       

              ]]>

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