Flex中如何在ArrayCollection创建一个可视化的游标(cursor)的例子

接下来的例子演示了如何在ArrayCollection中，创建一个可视化的游标(cursor)用来查找一个特别的项。 例子很简单，注意区分大小写。

让我们先来看一下Demo（可以右键View Source或 点击这里察看源代码 ）：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white"
6.         creationComplete="init();">
8.     <mx:Array id="arr">
9.         <mx:String>One</mx:String>
10.         <mx:String>Two</mx:String>
11.         <mx:String>Three</mx:String>
12.         <mx:String>Four</mx:String>
13.         <mx:String>Five</mx:String>
14.     </mx:Array>
16.     <mx:ArrayCollection id="arrColl" source="{arr}" />
18.     <mx:Script>
19.         <![CDATA[
20.             import mx.collections.IViewCursor;
21.             import mx.collections.Sort;
22.             import mx.collections.SortField;
24.             [Embed("assets/accept.png")]
25.             public var acceptIcon:Class;
27.             [Embed("assets/exclamation.png")]
28.             public var exclamationIcon:Class;
30.             private var cursor:IViewCursor;
32.             private function init():void {
33.                 var sortField:SortField = new SortField(null, true);
34.                 var sort:Sort = new Sort();
35.                 sort.fields = [sortField];
37.                 arrColl.sort = sort;
38.                 arrColl.refresh();
40.                 cursor = arrColl.createCursor();
41.             }
43.             private function button_click(evt:MouseEvent):void {
44.                 var found:Boolean = cursor.findAny(textInput.text);
45.                 if (found) {
46.                     img.source = acceptIcon;
47.                     list.selectedItem = cursor.current;
48.                 } else {
49.                     img.source = exclamationIcon;
50.                     list.selectedItem = null;
51.                 }
52.             }
53.         ]]>
54.     </mx:Script>
56.     <mx:ApplicationControlBar dock="true">
57.         <mx:Canvas>
58.             <mx:TextInput id="textInput" />
59.             <mx:Image id="img" right="3" verticalCenter="0" />
60.         </mx:Canvas>
61.         <mx:Button id="button"
62.                 label="Find"
63.                 click="button_click(event);" />
64.     </mx:ApplicationControlBar>
66.     <mx:List id="list"
67.             dataProvider="{arrColl}"
68.             width="100"
69.             rowCount="{arrColl.length}" />
71. </mx:Application>