Flex中如何自定义CheckBox作为List数据提供源的例子

By Minidxer | March 9, 2009

接下来的例子演示了Flex中如何自定义CheckBox作为List数据提供源。

让我们先来看一下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.         xmlns:vo="*"
  4.         layout="horizontal"
  5.         verticalAlign="middle"
  6.         backgroundColor="white"
  7.         creationComplete="init();">
  8.  
  9.     <mx:Script>
  10.         <![CDATA[
  11.             import mx.events.CollectionEvent;
  12.             import mx.utils.ObjectUtil;
  13.  
  14.             private function init():void {
  15.                 arrColl.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));
  16.             }
  17.  
  18.             private function arrColl_collectionChange(evt:CollectionEvent):void {
  19.                 try {
  20.                     var tArr:Array = arrColl.source.filter(selectedOnly);
  21.                     textArea.text = ObjectUtil.toString(tArr);
  22.                     lbl.text = tArr.length.toString() + " item(s) selected";
  23.                 } catch (err:Error) {
  24.                     // ignore.
  25.                 }
  26.             }
  27.  
  28.             private function selectedOnly(item:ListItemValueObject, idx:uint, arr:Array):Boolean {
  29.                 return item.isSelected;
  30.             }
  31.         ]]>
  32.     </mx:Script>
  33.  
  34.     <mx:Array id="arr">
  35.         <vo:ListItemValueObject label="One" isSelected="true" />
  36.         <vo:ListItemValueObject label="Two" isSelected="true" />
  37.         <vo:ListItemValueObject label="Three" isSelected="true" />
  38.         <vo:ListItemValueObject label="Four" isSelected="true" />
  39.         <vo:ListItemValueObject label="Five" isSelected="false" />
  40.         <vo:ListItemValueObject label="Six" isSelected="false" />
  41.         <vo:ListItemValueObject label="Seven" isSelected="false" />
  42.         <vo:ListItemValueObject label="Eight" isSelected="false" />
  43.         <vo:ListItemValueObject label="Nine" isSelected="false" />
  44.         <vo:ListItemValueObject label="Ten" isSelected="false" />
  45.         <vo:ListItemValueObject label="Eleven" isSelected="false" />
  46.         <vo:ListItemValueObject label="Twelve" isSelected="false" />
  47.     </mx:Array>
  48.  
  49.     <mx:ArrayCollection id="arrColl"
  50.             source="{arr}"
  51.             collectionChange="arrColl_collectionChange(event);" />
  52.  
  53.     <mx:Panel id="panel"
  54.             title="Items"
  55.             status="{arrColl.length} total"
  56.             styleName="opaquePanel">
  57.         <mx:List id="list"
  58.                 dataProvider="{arrColl}"
  59.                 alternatingItemColors="[#EEEEEE, white]"
  60.                 width="150"
  61.                 rowCount="8">
  62.             <mx:itemRenderer>
  63.                 <mx:Component>
  64.                     <mx:CheckBox selectedField="isSelected"
  65.                             change="onChange(event);">
  66.                         <mx:Script>
  67.                             <![CDATA[
  68.                                 private function onChange(evt:Event):void {
  69.                                     data.isSelected = !data.isSelected;
  70.                                 }
  71.                             ]]>
  72.                         </mx:Script>
  73.                     </mx:CheckBox>
  74.                 </mx:Component>
  75.             </mx:itemRenderer>
  76.         </mx:List>
  77.         <mx:ControlBar horizontalAlign="right">
  78.             <mx:Label id="lbl" />
  79.         </mx:ControlBar>
  80.     </mx:Panel>
  81.  
  82.     <mx:TextArea id="textArea"
  83.             verticalScrollPolicy="on"
  84.             width="100%"
  85.             height="{panel.height}" />
  86.  
  87. </mx:Application>

下面是ListItemValueObject.as代码：

Download: ListItemValueObject.as
  1. package {
  2.     public class ListItemValueObject {
  3.  
  4.         [Bindable]
  5.         public var label:String;
  6.  
  7.         [Bindable]
  8.         public var isSelected:Boolean;
  9.  
  10.         public function ListItemValueObject() {
  11.             super();
  12.         }
  13.     }
  14. }
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: List | No Comments » | Tags: , , , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll