Flex中如何通过监听collectionChange事件检测arraycollection是否改变了的例子

接下来的例子演示了 Flex中如何通过监听 collectionChange事件检测 ArrayCollection是否改变.这里所谓的改变，包括项目的追加，删除，以及刷新等操作。

让我们先来看一下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">
7.     <mx:Script>
8.         <![CDATA[
9.             import mx.utils.ObjectUtil;
10.             import mx.controls.dataGridClasses.DataGridColumn;
11.             import mx.events.CollectionEvent;
13.             private function arrColl_collectionChange(evt:CollectionEvent):void {
14.                 callLater(addTheItem, [evt]);
15.             }
17.             private function arrCollAddItem():void {
18.                 arrColl.addItem({data:new Date()});
19.             }
21.             private function addTheItem(evt:Event):void {
22.                 eventsArrColl.addItem(evt);
23.             }
25.             private function arrCollRemoveItem():void {
26.                 if (arrColl.length > 0) {
27.                     arrColl.removeItemAt(0);
28.                 }
29.             }
31.             private function dataGridColumn_labelFunc(item:Object, col:DataGridColumn):String {
32.                 return ObjectUtil.toString(item[col.dataField]);
33.             }
34.         ]]>
35.     </mx:Script>
37.     <mx:ArrayCollection id="eventsArrColl" />
38.     <mx:ArrayCollection id="arrColl"
39.             collectionChange="arrColl_collectionChange(event);" />
41.     <mx:Model id="columnModel">
42.         <columns>
43.             <bubbles>{bubblesCheckBox.selected}</bubbles>
44.             <cancelable>{cancelableCheckBox.selected}</cancelable>
45.             <currentTarget>{currentTargetCheckBox.selected}</currentTarget>
46.             <eventPhase>{eventPhaseCheckBox.selected}</eventPhase>
47.             <items>{itemsCheckBox.selected}</items>
48.             <kind>{kindCheckBox.selected}</kind>
49.             <location>{locationCheckBox.selected}</location>
50.             <oldLocation>{oldLocationCheckBox.selected}</oldLocation>
51.             <target>{targetCheckBox.selected}</target>
52.             <type>{typeCheckBox.selected}</type>
53.         </columns>
54.     </mx:Model>
56.     <mx:ApplicationControlBar dock="true">
57.         <mx:Button label="Add item to ArrayCollection"
58.                 emphasized="true"
59.                 click="arrCollAddItem();" />
60.         <mx:Button label="Remove item"
61.                 click="arrCollRemoveItem();" />
62.         <mx:Button label="Refresh items"
63.                 click="arrColl.refresh();" />
65.         <mx:Spacer width="100%" />
67.         <mx:PopUpButton label="Toggle DataGrid columns"
68.                 openAlways="true">
69.             <mx:popUp>
70.                 <mx:Form styleName="plain"
71.                         backgroundColor="white">
72.                     <mx:FormItem label="bubbles:">
73.                         <mx:CheckBox id="bubblesCheckBox"
74.                                 selected="true" />
75.                     </mx:FormItem>
76.                     <mx:FormItem label="cancelable:">
77.                         <mx:CheckBox id="cancelableCheckBox"
78.                                 selected="true" />
79.                     </mx:FormItem>
80.                     <mx:FormItem label="currentTarget:">
81.                         <mx:CheckBox id="currentTargetCheckBox"
82.                                 selected="true" />
83.                     </mx:FormItem>
84.                     <mx:FormItem label="eventPhase:">
85.                         <mx:CheckBox id="eventPhaseCheckBox"
86.                                 selected="true" />
87.                     </mx:FormItem>
88.                     <mx:FormItem label="items:">
89.                         <mx:CheckBox id="itemsCheckBox"
90.                                 selected="true" />
91.                     </mx:FormItem>
92.                     <mx:FormItem label="kind:">
93.                         <mx:CheckBox id="kindCheckBox"
94.                                 selected="true" />
95.                     </mx:FormItem>
96.                     <mx:FormItem label="location:">
97.                         <mx:CheckBox id="locationCheckBox"
98.                                 selected="true" />
99.                     </mx:FormItem>
100.                     <mx:FormItem label="oldLocation:">
101.                         <mx:CheckBox id="oldLocationCheckBox"
102.                                 selected="true" />
103.                     </mx:FormItem>
104.                     <mx:FormItem label="target:">
105.                         <mx:CheckBox id="targetCheckBox"
106.                                 selected="true" />
107.                     </mx:FormItem>
108.                     <mx:FormItem label="type:">
109.                         <mx:CheckBox id="typeCheckBox"
110.                                 selected="true" />
111.                     </mx:FormItem>
112.                 </mx:Form>
113.             </mx:popUp>
114.         </mx:PopUpButton>
115.     </mx:ApplicationControlBar>
117.     <mx:VDividedBox width="100%" height="100%">
118.         <mx:List id="list"
119.                 dataProvider="{arrColl}"
120.                 labelField="data"
121.                 width="50%"
122.                 rowCount="5" />
123.         <mx:DataGrid id="dataGrid"
124.                 dataProvider="{eventsArrColl}"
125.                 itemRenderer="mx.controls.Label"
126.                 width="100%"
127.                 height="100%">
128.             <mx:columns>
129.                 <mx:DataGridColumn dataField="bubbles"
130.                         visible="{columnModel.bubbles}" />
131.                 <mx:DataGridColumn dataField="cancelable"
132.                         visible="{columnModel.cancelable}" />
133.                 <mx:DataGridColumn dataField="currentTarget"
134.                         visible="{columnModel.currentTarget}" />
135.                 <mx:DataGridColumn dataField="eventPhase"
136.                         visible="{columnModel.eventPhase}" />
137.                 <mx:DataGridColumn dataField="items"
138.                         labelFunction="dataGridColumn_labelFunc"
139.                         visible="{columnModel.items}" />
140.                 <mx:DataGridColumn dataField="kind"
141.                         visible="{columnModel.kind}" />
142.                 <mx:DataGridColumn dataField="location"
143.                         visible="{columnModel.location}" />
144.                 <mx:DataGridColumn dataField="oldLocation"
145.                         visible="{columnModel.oldLocation}" />
146.                 <mx:DataGridColumn dataField="target"
147.                         visible="{columnModel.target}" />
148.                 <mx:DataGridColumn dataField="type"
149.                         visible="{columnModel.type}" />
150.             </mx:columns>
151.         </mx:DataGrid>
152.     </mx:VDividedBox>
154. </mx:Application>