Spark List ItemRenderer select state issue

Question

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.

enter image description here

Following is the code:

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

score 1 · Answer 1 · answered Jul 19 '13 at 08:25

For the second question, this selectAll() function works for me:

        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);
        }

Spark List ItemRenderer select state issue

1 Answers1