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

    Disable auto adjust selectIndex after ArrayCollection refresh()

    jasonzhuang Level 1

      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>