flex之mx:DataGrid

    对dataGrid中常见的情况作了试验，下面演示了几种用法：
    (1).在datagrid中根据item的数据触发的动作
    (2).演示item中的数据改写
    (3).演示不依赖于数据源的checkbox的使用

xml数据源代(index.xml)码如下：

<?xml version='1.0' ?>
<Msg exeCode="000">
<data empty="false">
   <entry>
    <key>bb</key>
    <value>BB</value>
   </entry>
   <entry>
    <key>aa</key>
    <value>BB</value>
   </entry>
   <entry>
    <key>cc</key>
    <value>
     <Book name="ASP.net" price="$12.5" />
     <Book name="Base.net" price="$12.5" />
     <Book name="C++.net" price="$12.5" />
    </value>
   </entry>
</data>
</Msg>

演示mxml页面如下： <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
       
         import mx.controls.CheckBox;
         import mx.rpc.events.ResultEvent;
         import mx.controls.Alert;
         import flash.events.Event;
         import flash.net.URLLoader; 
         import mx.events.CloseEvent;
         import flash.net.URLRequest;

         private function loadApp():void {
             var loader:URLLoader = new URLLoader();
             var request:URLRequest = new URLRequest("index.xml");
             var variables:URLVariables = new URLVariables();
             loader.load(request);
             loader.addEventListener(Event.COMPLETE, onComplete);
         }
       
         private function onComplete(event:Event):void
         {
             var loader:URLLoader = event.target as URLLoader;
             if (loader != null) {
                 var externalXML:XML = new XML(loader.data);
                 bookdg.dataProvider = externalXML.data.entry.(key=="cc").value.Book;
             }
             else {
                 Alert.show("loader is not a URLLoader!");
             }
         }
       
          public function labelChangeHandler(item: XML,colName:DataGridColumn):String {
             return "[" + item.@price + "]";
           }
         
           public function buttonDel() : void {
               Alert.okLabel="确定";
               Alert.cancelLabel="取消";
             Alert.show("危险操作，一经删除无法恢复! 你确认要删除吗", "警告", Alert.OK |Alert.CANCEL ,this, alertListener);
           }
         
         private function alertListener(eventObj:CloseEvent):void {
             if (eventObj.detail==Alert.OK) {
                 Alert.show(bookdg.selectedItem.valueOf().@name);
                 //删除动作
             }
         }
       
         //用于存储checkbox对象
         public var selects : Object = new Object();
         public function selectHandler(obj:CheckBox) : void {
             if(obj.selected){
                 selects[bookdg.selectedItem.valueOf().@name] = true;
             }else{
                 selects[bookdg.selectedItem.valueOf().@name] = false;
             }
         }
       
         public function showSelectedResult() : void {
             for (var key : String in selects) {
                 Alert.show(key + ":" + selects[key]);
                 //作你要根据checkbox来做的事情
             }
         }

         ]]>
    </mx:Script>
    <mx:Panel width="100%" height="100%">
      <mx:VBox width="100%" horizontalAlign="center">
        <mx:Text text="代码演示"/>
        <mx:DataGrid id="bookdg">
            <mx:columns>
                <mx:DataGridColumn headerText="选择" width="80" textAlign="center">
                    <mx:itemRenderer>
                     <mx:Component>
                          <!-- 演示不依赖于数据源的checkbox的使用 -->
                           <mx:CheckBox label="{data.attribute('name')}" click="outerDocument.selectHandler(this);"/>
                           <!--
                                 如果name不是属性而是子节点，那直接用data.name就出来了,
                                 这里不能用@name来取属性!
                           -->
                     </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn headerText="price" dataField="@price"/>
                <!-- 演示数据改写 -->
                <mx:DataGridColumn headerText="price" labelFunction="labelChangeHandler"/>
                <!-- 演示在datagrid中根据item的数据触发的动作 -->
                <mx:DataGridColumn headerText="操作" width="80" textAlign="center">
                    <mx:itemRenderer>
                     <mx:Component>
                         <!--
                              在itemRenderer内部提用方法需要加上outerDocument.方法，
                              或者Application.application.方法
                          -->
                         <mx:LinkButton label="删除" click="outerDocument.buttonDel()"></mx:LinkButton>
                     </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
        <mx:Button label="提交" click="loadApp();"/>
        <mx:Button label="显示选择结果" click="showSelectedResult();"/>
      </mx:VBox>
    </mx:Panel>
</mx:Application>