May 15

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

FlexAdd comments

接下来的例子演示了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">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.utils.ObjectUtil;
  10.             import mx.controls.dataGridClasses.DataGridColumn;
  11.             import mx.events.CollectionEvent;
  12.  
  13.             private function arrColl_collectionChange(evt:CollectionEvent):void {
  14.                 callLater(addTheItem, [evt]);
  15.             }
  16.  
  17.             private function arrCollAddItem():void {
  18.                 arrColl.addItem({data:new Date()});
  19.             }
  20.  
  21.             private function addTheItem(evt:Event):void {
  22.                 eventsArrColl.addItem(evt);
  23.             }
  24.  
  25.             private function arrCollRemoveItem():void {
  26.                 if (arrColl.length > 0) {
  27.                     arrColl.removeItemAt(0);
  28.                 }
  29.             }
  30.  
  31.             private function dataGridColumn_labelFunc(item:Object, col:DataGridColumn):String {
  32.                 return ObjectUtil.toString(item[col.dataField]);
  33.             }
  34.         ]]>
  35.     </mx:Script>
  36.  
  37.     <mx:ArrayCollection id="eventsArrColl" />
  38.     <mx:ArrayCollection id="arrColl"
  39.             collectionChange="arrColl_collectionChange(event);" />
  40.  
  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>
  55.  
  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();" />
  64.  
  65.         <mx:Spacer width="100%" />
  66.  
  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>
  116.  
  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>
  153.  
  154. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , ,

Related Post

Leave a Reply