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>