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

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. }

效果图如下：