Apr 16

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

FlexAdd comments

接下来的例子演示了如何在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();">
  7.  
  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>
  15.  
  16.     <mx:ArrayCollection id="arrColl" source="{arr}" />
  17.  
  18.     <mx:Script>
  19.         <![CDATA[
  20.             import mx.collections.IViewCursor;
  21.             import mx.collections.Sort;
  22.             import mx.collections.SortField;
  23.  
  24.             [Embed("assets/accept.png")]
  25.             public var acceptIcon:Class;
  26.  
  27.             [Embed("assets/exclamation.png")]
  28.             public var exclamationIcon:Class;
  29.  
  30.             private var cursor:IViewCursor;
  31.  
  32.             private function init():void {
  33.                 var sortField:SortField = new SortField(null, true);
  34.                 var sort:Sort = new Sort();
  35.                 sort.fields = [sortField];
  36.  
  37.                 arrColl.sort = sort;
  38.                 arrColl.refresh();
  39.  
  40.                 cursor = arrColl.createCursor();
  41.             }
  42.  
  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>
  55.  
  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>
  65.  
  66.     <mx:List id="list"
  67.             dataProvider="{arrColl}"
  68.             width="100"
  69.             rowCount="{arrColl.length}" />
  70.  
  71. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , , , , ,

Related Post

Leave a Reply