Creating a view cursor on an ArrayCollection in Flex

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.

5 thoughts on “Creating a view cursor on an ArrayCollection in Flex

  1. I am trying to do something similar only with an ArrayCollection that is setup like this:

    new ArrayCollection([{Region:"Southwest", Territory:"Arizona",Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, {Region:"Southwest", Territory:"Arizona", Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]);
    

    So then I made a simple test function:

    private function testDpfind():void {
    	var sortField2:SortField = new SortField("Territory", true);
                var sort2:Sort = new Sort();
                sort2.fields = [sortField2];
                dpFlat.sort = sort2;
                dpFlat.refresh();
                var cursor2:IViewCursor;
                cursor2 = dpFlat.createCursor();
    	var found:Boolean = cursor2.findAny("Arizona");
    	mx.controls.Alert.show("Hey",""+found);
    }
    

    Every time it throw this error:

    “Error: Find criteria must contain at least one sort field value.”

    Why wouldn’t this work?

  2. Ok, The answer is on the cursor.findAny line you need to specify the field name. Using the example above:

    var found:Boolean = cursor2.findAny({Territory: ”Arizona”});
    
  3. Hi…
    Thanks for this tutorial, but i wanna know if this code can be used to be data provider for datagrid?
    how to find data in datagrid if datagrid has sorted by clicking the header, and arraycollection is not sorted like datagrid did.

Comments are closed.