[Solved] Flex 4 Itemrenderer for List

by


One way to approach this is to add a field to the objects in your dataProvider that tracks whether or not the item has been selected.

Then, in your item renderer, you inspect this field and decide whether or not to display the checkmark. Here’s a working example app and renderer:

Application:

<?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" minWidth="955" minHeight="600" xmlns:local="*"
               creationComplete="application1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.CollectionEvent;
            import mx.events.CollectionEventKind;
            import mx.events.FlexEvent;
            import mx.events.PropertyChangeEvent;
            import mx.events.PropertyChangeEventKind;

            private var collection:ArrayCollection;

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                collection = new ArrayCollection([
                    { label: 1, selected: false },
                    { label: 2, selected: false },
                    { label: 3, selected: false }]);

                listbert.dataProvider=collection;
            }

            protected function listbert_clickHandler(event:MouseEvent):void
            {
                var index:int = listbert.selectedIndex;
                var item:Object = listbert.selectedItem;
                item.selected = !item.selected;
                // Create these events because the items in the ArrayCollection
                // are generic objects. It shouldn't be necessary if items in
                // your collection are a Class that extends EventDispatcher
                // see ArrayList::startTrackUpdates()
                var e:PropertyChangeEvent = new PropertyChangeEvent(
                    PropertyChangeEvent.PROPERTY_CHANGE, false,false,
                    PropertyChangeEventKind.UPDATE, 'selected', !item.selected,
                    item.selected, item);

                collection.dispatchEvent(new CollectionEvent(
                    CollectionEvent.COLLECTION_CHANGE, false,false,
                    CollectionEventKind.UPDATE, index, index, [e]));
            }

        ]]>
    </fx:Script>

        <s:List id="listbert" click="listbert_clickHandler(event)" itemRenderer="TestRenderer"/>
</s:Application>

Item Renderer:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" >
    <fx:Script>
        <![CDATA[

            override public function set data(value:Object):void
            {
                super.data = value;
                labelDisplay.text = value.label;
                if (value.selected)
                    checkMarkLabel.text = "✓";
                else
                    checkMarkLabel.text = "";
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <s:Label id="labelDisplay" />
    <s:Label id="checkMarkLabel" />
</s:ItemRenderer>

1

solved Flex 4 Itemrenderer for List