DataGrid使用 for Flex

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="OnLoad()">
    <mx:Style>
        Application 
        {
            font-size:12px;
        }
        ToolTip
        {
            font-size:12px;
        }
        ErrorString
        {
            font-size:12px;
        }
    </mx:Style>
    <mx:Script>
        <![CDATA[
            import comm.*; 
            import mx.collections.ArrayCollection;
            import mx.events.DataGridEvent;  
            import mx.controls.Alert;
            import mx.managers.CursorManager;
             
            [Bindable]   
            private var carArray : ArrayCollection = new ArrayCollection(); 
            
            private function OnLoad():void
            {
                var car : CarVO = new CarVO();   
                car.Name = "Ford";                   
                car.Available = false;   
                carArray.addItem(car);   
                   
                car = new CarVO();   
                car.Name = "Benz";   
                car.Available = true;   
                carArray.addItem(car);   
                   
                car = new CarVO();   
                car.Name = "BMW";   
                car.Available = true;   
                carArray.addItem(car);
                
                car = new CarVO();   
                car.Name = "BMW";   
                car.Available = true;   
                carArray.addItem(car);
                
                car = new CarVO();   
                car.Name = "BMW";   
                car.Available = true;   
                carArray.addItem(car);
                
                car = new CarVO();   
                car.Name = "BMW";   
                car.Available = true;   
                carArray.addItem(car);
                
                car = new CarVO();   
                car.Name = "BMW";   
                car.Available = true;   
                carArray.addItem(car);
            }
            [Bindable]
            private var employees:XML = 
              <object>        
                <employee>
                    <name>Christina Coenraets</name>
                    <phone>555-219-2270</phone>
                    <email>ccoenraets@fictitious.com</email>
                    <active>false</active>
                </employee>
                <employee>
                    <name>Joanne Wall</name>
                    <phone>555-219-2012</phone>
                    <email>jwall@fictitious.com</email>
                    <active>true</active>
                </employee>
                <employee>
                    <name>Maurice Smith</name>
                    <phone>555-219-2012</phone>
                    <email>maurice@fictitious.com</email>
                    <active>false</active>
                </employee>
                <employee>
                    <name>Mary Jones</name>
                    <phone>555-219-2000</phone>
                    <email>mjones@fictitious.com</email>
                    <active>false</active>
                </employee>
                <employee>
                    <name>Maurice Smith</name>
                    <phone>555-219-2012</phone>
                    <email>maurice@fictitious.com</email>
                    <active>false</active>
                </employee>
                <employee>
                    <name>Mary Jones</name>
                    <phone>555-219-2000</phone>
                    <email>mjones@fictitious.com</email>
                    <active>false</active>
                </employee>
                      <employee>
                    <name>Maurice Smith</name>
                    <phone>555-219-2012</phone>
                    <email>maurice@fictitious.com</email>
                    <active>false</active>
                </employee>
                <employee>
                    <name>Mary Jones</name>
                    <phone>555-219-2000</phone>
                    <email>mjones@fictitious.com</email>
                    <active>false</active>
                </employee>
                      <employee>
                    <name>Maurice Smith</name>
                    <phone>555-219-2012</phone>
                    <email>maurice@fictitious.com</email>
                    <active>false</active>
                </employee>
                <employee>
                    <name>Mary Jones</name>
                    <phone>555-219-2000</phone>
                    <email>mjones@fictitious.com</email>
                    <active>false</active>
                </employee>
                 <employee>
                    <name>Maurice Smith</name>
                    <phone>555-219-2012</phone>
                    <email>maurice@fictitious.com</email>
                    <active>false</active>
                </employee>
                <employee>
                    <name>Mary Jones</name>
                    <phone>555-219-2000</phone>
                    <email>mjones@fictitious.com</email>
                    <active>true</active>
                </employee>
            </object>
            private function Button_Click(e:Event):void
            {
                if(myTxt.text == "")
                    myTxt.errorString="This Value is not NUll";
                else
                    myTxt.errorString = null;
            }
            //用户准备好编辑项目以后调度；例如，当鼠标在项目上时，用户释放鼠标按键就会指示这种情况。
            private function OnDataGridEdit_Begining(event:DataGridEvent):void
            {
                    //设置第0列不允许编辑
                    if(event.columnIndex == 0)
                        event.preventDefault(); 
                    if(event.columnIndex == 3)
                        event.preventDefault();
            }
            
            //在DataGrid中的点CheckBox执行的事件,将修改DataGrid.provider的数据.
            public function checkBox_click(event:MouseEvent):void
            {
                var car:CarVO = CarVO(carArray.getItemAt(gvw.selectedIndex));
                if(car.Available == true)
                    car.Available = false;
                else
                    car.Available = true;
                gvw.dataProvider = carArray;
                
            }
            //执行DataGrid中的删除选中行.
            public function btnDelete_Click(event:Event):void
            {            
                var car:CarVO = CarVO(carArray.getItemAt(gvw.selectedIndex));
                Alert.show(car.Name);    
            }
            //编辑一项.
            private function gvw_OnEdit_End(e:DataGridEvent):void
            {
                CursorManager.setBusyCursor();
                var dg:DataGrid = e.currentTarget as DataGrid;
                var myEditor:TextInput = TextInput(dg.itemEditorInstance);
                var newVal:String = myEditor.text;
                var oldVal:String = dg.editedItemRenderer.data[e.dataField].toString();
                cellInfo.text = "Cell edited.\n";
                cellInfo.text += "Row,column:"+e.rowIndex+","+e.columnIndex+"\n";
                cellInfo.text += "new value :"+newVal+"\n";
                cellInfo.text += "Old value :"+oldVal;
                CursorManager.removeBusyCursor();
            }
                
            
        ]]>
    </mx:Script>
    <mx:transitions>
        <mx:Transition  fromState="*" toState="*">
            <mx:Sequence targets="{[panel1,panel2,panel3]}">
                <mx:Move duration="200"/>
                <!--<mx:Rotate angleFrom="180" angleTo="360" /> -->
                <mx:Resize duration="200" />
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>    
    <mx:states>
        <mx:State name="s1">
            <mx:SetProperty target="{panel1}" name="x" value="5"/>
            <mx:SetProperty target="{panel1}" name="y" value="60"/>    
            <mx:SetProperty target="{panel1}" name="height" value="{hs.value}"/>
            <mx:SetProperty target="{panel1}" name="width" value="{vs.value}"/>            
            <mx:SetProperty target="{panel2}" name="x" value="135"/>
            <mx:SetProperty target="{panel2}" name="y" value="10"/>    
            <mx:SetProperty target="{panel2}" name="height" value="30"/>
            <mx:SetProperty target="{panel2}" name="width" value="125"/>            
            <mx:SetProperty target="{panel3}" name="x" value="270"/>
            <mx:SetProperty target="{panel3}" name="y" value="10"/>    
            <mx:SetProperty target="{panel3}" name="height" value="30"/>
            <mx:SetProperty target="{panel3}" name="width" value="125"/>                                
        </mx:State>        
        <mx:State name="s2">
            <mx:SetProperty target="{panel1}" name="x" value="5"/>
            <mx:SetProperty target="{panel1}" name="y" value="10"/>    
            <mx:SetProperty target="{panel1}" name="height" value="30"/>
            <mx:SetProperty target="{panel1}" name="width" value="125"/>            
            <mx:SetProperty target="{panel2}" name="x" value="5"/>
            <mx:SetProperty target="{panel2}" name="y" value="60"/>    
            <mx:SetProperty target="{panel2}" name="height" value="{hs.value}"/>
            <mx:SetProperty target="{panel2}" name="width" value="{vs.value}"/>            
            <mx:SetProperty target="{panel3}" name="x" value="270"/>
            <mx:SetProperty target="{panel3}" name="y" value="10"/>    
            <mx:SetProperty target="{panel3}" name="height" value="30"/>
            <mx:SetProperty target="{panel3}" name="width" value="125"/>                            
        </mx:State>
        <mx:State name="s3">
            <mx:SetProperty target="{panel1}" name="x" value="5"/>
            <mx:SetProperty target="{panel1}" name="y" value="10"/>    
            <mx:SetProperty target="{panel1}" name="height" value="30"/>
            <mx:SetProperty target="{panel1}" name="width" value="125"/>                            
            <mx:SetProperty target="{panel2}" name="x" value="135"/>
            <mx:SetProperty target="{panel2}" name="y" value="10"/>    
            <mx:SetProperty target="{panel2}" name="height" value="30"/>
            <mx:SetProperty target="{panel2}" name="width" value="125"/>            
            <mx:SetProperty target="{panel3}" name="x" value="5"/>
            <mx:SetProperty target="{panel3}" name="y" value="60"/>    
            <mx:SetProperty target="{panel3}" name="height" value="{hs.value}"/>
            <mx:SetProperty target="{panel3}" name="width" value="{vs.value}"/>            
        </mx:State>
    </mx:states>

    <mx:Panel x="5" y="60" width="{vs.value}" height="{hs.value}" layout="absolute" title="Panel 1" id="panel1" click="this.currentState='s1'">
<!--
DataGridEvent.HEADER_RELEASE：用户在列标题上按下并释放鼠标以后调度。 
DataGridEvent.ITEM_EDIT_BEGIN：准备编辑项目时调度。 
DataGridEvent.ITEM_EDIT_BEGINNING：用户准备好编辑项目以后调度；例如，当鼠标在项目上时，用户释放鼠标按键就会指示这种情况。 
DataGridEvent.ITEM_EDIT_END：编辑会话结束时调度。 
DataGridEvent.ITEM_FOCUS_IN：在项目获得焦点以后调度。 
DataGridEvent.ITEM_FOCUS_OUT：在项目失去焦点以后调度。
 -->
        <mx:DataGrid left="10" right="10" top="10" bottom="85" dataProvider="{carArray}" editable="true" 
            itemEditBegin="OnDataGridEdit_Begining(event)" id="gvw" itemEditEnd="gvw_OnEdit_End(event)">
            <mx:columns>
                <mx:DataGridColumn headerText="Column 1" dataField="Available" >
                    <mx:itemRenderer>
                        <mx:Component>
                        <!-- 在Mx:Component中要使用outerDocument发部事件.如 click="outerDocument.checkBox_click(event)"-->
                            <mx:CheckBox label="{data.Name}" selected="{data.Available}" click="outerDocument.checkBox_click(event)"/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn headerText="名称" dataField="Name"/>
                <mx:DataGridColumn headerText="电话" dataField="Available"/>
                <mx:DataGridColumn headerText="操作" dataField="Name">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:LinkButton label="删除" click="outerDocument.btnDelete_Click(event)">
                            </mx:LinkButton>
                        </mx:Component>
                    </mx:itemRenderer>    
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
        <mx:TextArea left="10" right="10" bottom="10" height="70" id="cellInfo"/>
    </mx:Panel>
    <mx:Panel x="135" y="10" width="317" height="162" layout="absolute" title="Panel 2" id="panel2" click="this.currentState='s2'">        
            <mx:TextInput id="myTxt" x="10" y="31" />
            <mx:Button label="Button" x="178" y="32" click="Button_Click(event)" toolTip="提交"/>        
    </mx:Panel>
    <mx:Panel x="270" y="10" width="125" height="30" layout="absolute" title="Panel 3" id="panel3" click="this.currentState='s3'">
    </mx:Panel>
    <mx:Button label="Reset" click="this.currentState=''" bottom="10" horizontalCenter="0"/>
    <mx:VSlider value="0" maximum="600" minimum="300" tickInterval="10" id="hs" right="5" top="10" bottom="55"/>
    <mx:HSlider value="0" maximum="1024" minimum="390" tickValues="10" id="vs" bottom="31" right="10" left="10"/>
</mx:Application>

注意:
    在DataGrid中的CheckBox列用到了data.Available这种邦定方式.如果把DataGrid的邦定换成是直接的XML对象邦定那么在Data.Available邦定时会出现 warning: unable to bind to property 'Available' on class 'XML' (class is not an IEventDispatcher) 原因是在XML对象内属性Available没有声名[Bindable] 的原因,这样会出现不可预料的结果.如果把他定义用Class 对象在用时使用[Bindable] 关键字问题解决.