侦测ArrayCollection状态的变化.

监听 collectionChange 事件 的学习.
示例：

代码：

<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="vertical"
        verticalAlign ="middle"
        backgroundColor ="white" >

     < mx:Script >
         <![CDATA[
            import mx.utils.ObjectUtil;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.events.CollectionEvent;

            private function arrColl_collectionChange(evt:CollectionEvent):void {
                callLater(addTheItem, [evt]);
            }

            private function arrCollAddItem():void {
                arrColl.addItem({data:new Date()});
            }

            private function addTheItem(evt:Event):void {
                eventsArrColl.addItem(evt);
            }

            private function arrCollRemoveItem():void {
                if (arrColl.length > 0) {
                    arrColl.removeItemAt(0);
                }
            }

            private function dataGridColumn_labelFunc(item:Object, col:DataGridColumn):String {
                return ObjectUtil.toString(item[col.dataField]);
            }
         ]]>
     </ mx:Script >

     < mx:ArrayCollection  id ="eventsArrColl"   />
     < mx:ArrayCollection  id ="arrColl"
            collectionChange ="arrColl_collectionChange(event);"   />

     < mx:Model  id ="columnModel" >
         < columns >
             < bubbles > {bubblesCheckBox.selected} </ bubbles >
             < cancelable > {cancelableCheckBox.selected} </ cancelable >
             < currentTarget > {currentTargetCheckBox.selected} </ currentTarget >
             < eventPhase > {eventPhaseCheckBox.selected} </ eventPhase >
             < items > {itemsCheckBox.selected} </ items >
             < kind > {kindCheckBox.selected} </ kind >
             < location > {locationCheckBox.selected} </ location >
             < oldLocation > {oldLocationCheckBox.selected} </ oldLocation >
             < target > {targetCheckBox.selected} </ target >
             < type > {typeCheckBox.selected} </ type >
         </ columns >
     </ mx:Model >

     < mx:ApplicationControlBar  dock ="true" >
         < mx:Button  label ="Add item to ArrayCollection"
                emphasized ="true"
                click ="arrCollAddItem();"   />
         < mx:Button  label ="Remove item"
                click ="arrCollRemoveItem();"   />
         < mx:Button  label ="Refresh items"
                click ="arrColl.refresh();"   />

         < mx:Spacer  width ="100%"   />

         < mx:PopUpButton  label ="Toggle DataGrid columns"
                openAlways ="true" >
             < mx:popUp >
                 < mx:Form  styleName ="plain"
                        backgroundColor ="white" >
                     < mx:FormItem  label ="bubbles:" >
                         < mx:CheckBox  id ="bubblesCheckBox"
                                selected ="true"   />
                     </ mx:FormItem >
                     < mx:FormItem  label ="cancelable:" >
                         < mx:CheckBox  id ="cancelableCheckBox"
                                selected ="true"   />
                     </ mx:FormItem >
                     < mx:FormItem  label ="currentTarget:" >
                         < mx:CheckBox  id ="currentTargetCheckBox"
                                selected ="true"   />
                     </ mx:FormItem >
                     < mx:FormItem  label ="eventPhase:" >
                         < mx:CheckBox  id ="eventPhaseCheckBox"
                                selected ="true"   />
                     </ mx:FormItem >
                     < mx:FormItem  label ="items:" >
                         < mx:CheckBox  id ="itemsCheckBox"
                                selected ="true"   />
                     </ mx:FormItem >
                     < mx:FormItem  label ="kind:" >
                         < mx:CheckBox  id ="kindCheckBox"
                                selected ="true"   />
                     </ mx:FormItem >
                     < mx:FormItem  label ="location:" >
                         < mx:CheckBox  id ="locationCheckBox"
                                selected ="true"   />
                     </ mx:FormItem >
                     < mx:FormItem  label ="oldLocation:" >
                         < mx:CheckBox  id ="oldLocationCheckBox"
                                selected ="true"   />
                     </ mx:FormItem >
                     < mx:FormItem  label ="target:" >
                         < mx:CheckBox  id ="targetCheckBox"
                                selected ="true"   />
                     </ mx:FormItem >
                     < mx:FormItem  label ="type:" >
                         < mx:CheckBox  id ="typeCheckBox"
                                selected ="true"   />
                     </ mx:FormItem >
                 </ mx:Form >
             </ mx:popUp >
         </ mx:PopUpButton >
     </ mx:ApplicationControlBar >

     < mx:VDividedBox  width ="100%"  height ="100%" >
         < mx:List  id ="list"
                dataProvider =" {arrColl} "
                labelField ="data"
                width ="50%"
                rowCount ="5"   />
         < mx:DataGrid  id ="dataGrid"
                dataProvider =" {eventsArrColl} "
                itemRenderer ="mx.controls.Label"
                width ="100%"
                height ="100%" >
             < mx:columns >
                 < mx:DataGridColumn  dataField ="bubbles"
                        visible =" {columnModel.bubbles} "   />
                 < mx:DataGridColumn  dataField ="cancelable"
                        visible =" {columnModel.cancelable} "   />
                 < mx:DataGridColumn  dataField ="currentTarget"
                        visible =" {columnModel.currentTarget} "   />
                 < mx:DataGridColumn  dataField ="eventPhase"
                        visible =" {columnModel.eventPhase} "   />
                 < mx:DataGridColumn  dataField ="items"
                        labelFunction ="dataGridColumn_labelFunc"
                        visible =" {columnModel.items} "   />
                 < mx:DataGridColumn  dataField ="kind"
                        visible =" {columnModel.kind} "   />
                 < mx:DataGridColumn  dataField ="location"
                        visible =" {columnModel.location} "   />
                 < mx:DataGridColumn  dataField ="oldLocation"
                        visible =" {columnModel.oldLocation} "   />
                 < mx:DataGridColumn  dataField ="target"
                        visible =" {columnModel.target} "   />
                 < mx:DataGridColumn  dataField ="type"
                        visible =" {columnModel.type} "   />
             </ mx:columns >
         </ mx:DataGrid >
     </ mx:VDividedBox >

</ mx:Application >