CollectionEvent对象监听Collection类的修改

在Flex中，Collection类实现了IList接口，这个接口提供一些方法(adding,removing,updating)来修改集合中的元素。可以使用IList接口的方法和属性在ArrayCollection类, XMLList类,和标准Flex控件的dataProvider 属性上。可以使用IList的addItem(), removeItem(), 和setItemAt() 方法分别增加，删除和更新元素数据。addItemAt() and removeItemAt() methods, 和the setItemAt()方法提供第二个参数，下标位置，来指定要在集合中影响的位置。IList接口的length属性返回集合中元素的数量。 

Flex的集合机制也包括描述数据改变的事件。实现了IList 或者 ICollectionView 接口的类，无论何时数据发生改变，都分发CollectionEvent类事件所有集合时间都包含类型属性值CollectionEvent.COLLECTION_CHANGE。 

CollectionEvent对象有kind属性标志着集合被改变的方式。通过kind属性与CollectionEventKind的常量的对比，你可以测试集合所发生的改变。主要的常量包括ADD,REMOVE和 UPDATE。 


CollectionEvent对象包含一个items属性这个属性是一个对象的数组，这个数组的类型依赖于对象分发的事件的类型。对于ADD和REMOVE时间，这个数组包含added和removed数组。对于UPDATE事件，这个items属性包含PropertyChangeEvent事件对象数组。这些对象的属性显示出改变的类型和属性改变之前和之后的值。例如，PropertyChangeEvent类的kind属性显示出属性被改变的方式；你可以测试改变的类型通过把kind属性与PropertyChangeEventKind的常量UPDATE或DELETE. 


下边的例子监听DataGrid的改变事件，来创建一个概览——详细关系。在这个关系中，选择一个DataGrid中的一行后，数据会显示在几个form控件中，然后你就可以编辑数据了。（使用概览——详细关系可以使DataGrid控件具有可编辑功能）。通过IList接口的addItem(), removeItem(), and setItemAt()方法，可以对DataGrid中的数据增加，删除，修改。这个例子也监听ArrayCollection上的collectionChange时间保持对数据增删改的日志记录。 

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.    <mx:Script>  
4.     <![CDATA[  
5.         import mx.events.*;  
6.         import mx.collections.*;  
7.         public function collectionEventHandler(event:CollectionEvent):void   
8.         {  
9.             switch(event.kind)  
10.             {  
11.                 case CollectionEventKind.ADD:  
12.                  addLog("item"+event.location +"ADD");  
13.                  break;  
14.                 case  CollectionEventKind.REMOVE:  
15.                  addLog("item"+event.location +"REMOVE");  
16.                  break;  
17.                 case  CollectionEventKind.UPDATE:  
18.                  addLog("item"+event.location +"UPDATE");  
19.                  break;  
20.                 case  CollectionEventKind.REPLACE:  
21.                  addLog("item"+event.location +"REPLACE");  
22.                  break;  
23.             }  
24.         }  
25.             public function addLog(str:String):void   
26.             {  
27.                 log.text += str + "\n";  
28.             }              
29.             public function addPerson():void   
30.             {  
31.                 ac.addItem({first:firstInput.text,  
32.                             last:lastInput.text,  
33.                             email:emailInput.text});  
34.                 clearInputs();  
35.             }              
36.             public function removePerson():void {  
37.                 if(dg.selectedIndex >= 0){  
38.                     ac.removeItemAt(dg.selectedIndex);  
39.                 }  
40.             }  
41.             public function updatePerson():void {  
42.                 if(dg.selectedItem !== null)  
43.                 {  
44.                     ac.setItemAt({first:firstInput.text, last:lastInput.text,  
45.                         email:emailInput.text}, dg.selectedIndex);  
46.                 }  
47.             }  
48.             public function dgChangeHandler():void   
49.             {  
50.   
51.                 clearInputs();  
52.                 firstInput.text = dg.selectedItem.first;  
53.                 lastInput.text = dg.selectedItem.last;  
54.                 emailInput.text = dg.selectedItem.email;  
55.             }  
56.             public function clearInputs():void   
57.             {  
58.                 firstInput.text = "";  
59.                 lastInput.text = "";  
60.                 emailInput.text = "";  
61.             }  
62.     ]]>  
63.    </mx:Script>  
64.     <mx:ArrayCollection id="ac"  
65.             collectionChange="collectionEventHandler(event)">  
66.         <mx:source>  
67.             <mx:Object first="Matt" last="Matthews" email="matt@myco.com"/>  
68.             <mx:Object first="Sue" last="Sanderson" email="sue@myco.com"/>  
69.             <mx:Object first="Harry" last="Harrison" email="harry@myco.com"/>  
70.         </mx:source>  
71.     </mx:ArrayCollection>  
72.     <mx:Panel title="Master-Detail View" width="100%">          
73.         <mx:DataGrid width="100%" id="dg" dataProvider="{ac}"  
74.                 change="dgChangeHandler()">  
75.             <mx:columns>  
76.                 <mx:DataGridColumn dataField="first" headerText="First Name"/>  
77.                 <mx:DataGridColumn dataField="last" headerText="Last Name"/>  
78.                 <mx:DataGridColumn dataField="email" headerText="Email"/>   
79.             </mx:columns>  
80.         </mx:DataGrid>  
81.         <mx:Form label="test" width="100%">  
82.            <mx:FormItem label="First Name" width="100%">  
83.                 <mx:TextInput id="firstInput" width="100%"/>  
84.            </mx:FormItem>  
85.            <mx:FormItem label="Last Name" width="100%">  
86.                 <mx:TextInput id="lastInput" width="100%"/>  
87.            </mx:FormItem>  
88.            <mx:FormItem label="Email" width="100%">  
89.                 <mx:TextInput id="emailInput" width="100%"/>  
90.            </mx:FormItem>  
91.         </mx:Form>      
92.         <mx:ControlBar horizontalAlign="center">  
93.             <mx:Button label="Add New" click="addPerson()"/>  
94.             <mx:Button label="Update Selected" click="updatePerson()"/>  
95.             <mx:Button label="Remove Selected" click="removePerson()"/>  
96.             <mx:Button label="Clear" click="clearInputs()"/>  
97.         </mx:ControlBar>  
98.     </mx:Panel>  
99.     <mx:Panel title="Change log" width="100%" height="125" y="333">          
100.         <mx:TextArea id="log" width="100%" height="100%"/>  
101.   
102.     </mx:Panel>    
103. </mx:Application>  

from:http://www.iteye.com/topic/607521