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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

5 Responses to Creating a view cursor on an ArrayCollection in Flex

  1. ev01 says:

    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. ev01 says:

    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. Ponle says:

    Thanks so much for his post,it was magical

  4. moe says:

    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.

  5. Pierpaolo says:

    What if I specified 3 fields for sorting but want to search only within the third field?