Skip navigation
Currently Being Moderated

spark List itemRenderer select state issue

Jul 18, 2013 11:28 PM

Tags: #flex4 #itemrender #list.selecteditem #itemrenderer_problem

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>

 

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points