Flex Examples

The following example shows how you can create a view cursor to find a specific item within an ArrayCollection.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/15/creating-a-view-cursor-on-an-arraycollection-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Array id="arr">
        <mx:String>One</mx:String>
        <mx:String>Two</mx:String>
        <mx:String>Three</mx:String>
        <mx:String>Four</mx:String>
        <mx:String>Five</mx:String>
    </mx:Array>

    <mx:ArrayCollection id="arrColl" source="{arr}" />

    <mx:Script>
        <![CDATA[
            import mx.collections.IViewCursor;
            import mx.collections.Sort;
            import mx.collections.SortField;

            [Embed("assets/accept.png")]
            public var acceptIcon:Class;

            [Embed("assets/exclamation.png")]
            public var exclamationIcon:Class;

            private var cursor:IViewCursor;

            private function init():void {
                var sortField:SortField = new SortField(null, true);
                var sort:Sort = new Sort();
                sort.fields = [sortField];

                arrColl.sort = sort;
                arrColl.refresh();

                cursor = arrColl.createCursor();
            }

            private function button_click(evt:MouseEvent):void {
                var found:Boolean = cursor.findAny(textInput.text);
                if (found) {
                    img.source = acceptIcon;
                    list.selectedItem = cursor.current;
                } else {
                    img.source = exclamationIcon;
                    list.selectedItem = null;
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Canvas>
            <mx:TextInput id="textInput" />
            <mx:Image id="img" right="3" verticalCenter="0" />
        </mx:Canvas>
        <mx:Button id="button"
                label="Find"
                click="button_click(event);" />
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arrColl}"
            width="100"
            rowCount="{arrColl.length}" />

</mx:Application>

View source is enabled in the following example.