刚开始学习flex datagrid的时候都是写固定的数据,要不就是放在数组中。
可是以后用到的数据就是动态的大多也都是存放在xml中。
让我来分享一下我学习DataGrid的成果吧,希望大家多交流。
1 HTTPService
如果和xml交互就要 通过<mx:HTTPService>标签创建一个HTTPService实例对象,他通过调用send()方法向指定的url发送一个http请求,并得到http回应。
<mx:HTTPService
id="gxml"
url="xml/DataGrid_Data.xml" //提供数据的url
resultFormat="xml" //返回数据的格式
result="getResult(event)" //返回后响应函数
fault="geterr(event)" //出错时响应函数
/>
2.创建一个按钮Button,负责显示数据的开关。
<mx:Button label="获取数据" click="gxml.send()"/>
3.DataGrid控件
<mx:DataGrid id="mydatagrid" fontSize="12" fontWeight="bold" textAlign="center" color="#526BBE" borderColor="#C0C8CC" themeColor="#A9B1B3" alpha="0.86" alternatingItemColors="[#E9E9E9, #EFF8F9]" borderStyle="inset">
<mx:columns>
<mx:DataGridColumn headerText="名称" dataField="Name"/>
<mx:DataGridColumn headerText="公司" dataField="Company"/>
<mx:DataGridColumn headerText="版本" dataField="Version"/>
</mx:columns>
</mx:DataGrid>
4.函数方法
import mx.rpc.events.FaultEvent;
import mx.collections.*;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
[Bindable]
private var xmlResult:XML;
private function getResult(event:ResultEvent):void //获取xml的数据结果
{
xmlResult=XML(event.result);
mydatagrid.dataProvider=xmlResult.children();
}
private function geterr(event:FaultEvent):void //提交出现异常时出发
{
Alert.show(event.fault.message, "error message");
}
完整代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.collections.*;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
[Bindable]
private var xmlResult:XML;
private function getResult(event:ResultEvent):void
{
xmlResult=XML(event.result);
mydatagrid.dataProvider=xmlResult.children();
}
private function geterr(event:FaultEvent):void
{
Alert.show(event.fault.message, "error message");
}
]]>
</mx:Script>
<mx:HTTPService id="gxml" url="xml/DataGrid_Data.xml" useProxy="false" resultFormat="xml" result="getResult(event)" fault="geterr(event)"></mx:HTTPService>
<mx:DataGrid id="mydatagrid" fontSize="12" fontWeight="bold" textAlign="center" color="#526BBE" borderColor="#C0C8CC" themeColor="#A9B1B3" alpha="0.86" alternatingItemColors="[#E9E9E9, #EFF8F9]" borderStyle="inset">
<mx:columns>
<mx:DataGridColumn headerText="名称" dataField="Name"/>
<mx:DataGridColumn headerText="公司" dataField="Company"/>
<mx:DataGridColumn headerText="版本" dataField="Version"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="获取数据" click="gxml.send()"/>
</mx:Application>
xml文件
<?xml version="1.0" encoding="UTF-8"?>
<root>
<node label="Flash">
<Name>Flash</Name>
<Company>Adobe</Company>
<Version>9.0</Version>
</node>
<node label="Java">
<Name>Java</Name>
<Company>Sun</Company>
<Version>6.0</Version>
</node>
<node label=".Net">
<Name>.Net</Name>
<Company>Microsoft</Company>
<Version>2.0</Version>
</node>
<node label="Flex">
<Name>Flex</Name>
<Company>Adobe</Company>
<Version>2.0</Version>
</node>
<node label="OICQ">
<Name>OICQ</Name>
<Company>腾讯</Company>
<Version>2007</Version>
</node>
</root>
显示效果:
点击显示按钮:
呵呵希望就flex多多交流。