这一节,将学习到除了用JSON做GridPanel的数据源外,还可以使用XML
一。静态示例
1.xml文件内容:
< Data >
< Items >
< TotalResults > 203 </ TotalResults >
< TotalPages > 21 </ TotalPages >
< Item >
< ASIN > 0446355453 </ ASIN >
< Author > Jimmy.Yang </ Author >
< Manufacturer > Warner Books </ Manufacturer >
< ProductGroup > Book </ ProductGroup >
< Title > Master of the Game </ Title >
</ Item >
< Item >
< ASIN > 0446613657 </ ASIN >
< Author > Sidney Sheldon </ Author >
< Manufacturer > Warner Books </ Manufacturer >
< ProductGroup > Book </ ProductGroup >
< Title > Are You Afraid of the Dark? </ Title >
</ Item >
</ Items >
</ Data >
2.ExtJs调用页面
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< link rel ="stylesheet" type ="text/css" href ="../resources/css/ext-all.css" />
< script type ="text/javascript" src ="../adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="../ext-all.js" ></ script >
< title > ExtJs_Grid_Xml </ title >
</ head >
< body >
< script type ="text/javascript" >
Ext.onReady( function () {
var store = new Ext.data.Store({
url: ' GridData.xml ' ,
reader: new Ext.data.XmlReader(
{ record: ' Item ' },
[ " ASIN " , " Author " , " Manufacturer " , " ProductGroup " , " Title " ])
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ id: " ASIN " , header: " 出版号 " , width: 120 , dataIndex: ' ASIN ' , sortable: true },
{ header: " 作者 " , width: 120 , dataIndex: ' Author ' , sortable: true },
{ header: " 书名 " , width: 180 , dataIndex: ' Title ' , sortable: true },
{ header: " 制作商 " , width: 115 , dataIndex: ' Manufacturer ' , sortable: false },
{ header: " 产品组 " , width: 100 , dataIndex: ' ProductGroup ' , sortable: false }],
renderTo: ' example-grid ' ,
viewConfig: { columnsText: ' 显示列 ' , sortAscText: ' 升序 ' , sortDescText: ' 降序 ' },
width: 640 ,
height: 100
});
store.load();
});
</ script >
< div id ="example-grid" ></ div >
</ body >
</ html >
运行效果如下图:
转载请注明来自"菩提树下的杨过" http://www.cnblogs.com/yjmyzz/archive/2008/08/28/1278949.html
二。结合WCF动态读取
1.WCF端关键代码
定义一个可序列化的类(当然也可以是Linq to Sql中自动生成的类,不过要手动加DataContract和DataMember标记,以满足WCF的数据契约要求)
public class Book
{
[DataMember]
public string ISBN;
[DataMember]
public string Title;
[DataMember]
public string Author;
[DataMember]
public string Publisher;
}
返回Xml数据的方法,注意格式要设置成WebMessageFormat.Xml
[WebInvoke(ResponseFormat = WebMessageFormat.Xml, Method = " GET " , UriTemplate = " GetXmlData " )]
public Book[] GetXmlData()
{
List < Book > _List = new List < Book > ();
_List.Add( new Book() { ISBN = " 00001 " , Title = " c#深入编程(第四版) " , Author = " Alien " , Publisher = " 北京出版社 " });
_List.Add( new Book() { ISBN = " 00002 " , Title = " ExtJs完全教程 " , Author = " Mike " , Publisher = " 上海出版社 " });
return _List.ToArray();
}
2.前端ExtJs代码
Ext.onReady( function () {
var store = new Ext.data.Store({
url: ' MyService.svc/GetXmlData ' ,
reader: new Ext.data.XmlReader(
{ record: ' Book ' },
[ " Author " , " ISBN " , " Publisher " , " Title " ])
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ id: " ISBN " , header: " 出版号 " , width: 120 , dataIndex: ' ISBN ' , sortable: true },
{ header: " 作者 " , width: 120 , dataIndex: ' Author ' , sortable: true },
{ header: " 书名 " , width: 180 , dataIndex: ' Title ' , sortable: true },
{ header: " 出版社 " , width: 115 , dataIndex: ' Publisher ' , sortable: false }],
renderTo: ' example-grid ' ,
viewConfig: { columnsText: ' 显示列 ' , sortAscText: ' 升序 ' , sortDescText: ' 降序 ' },
width: 640 ,
height: 100
});
store.load();
});
< / script>
除了把url由xxx.xml,改成了"MySerivce.svc/GetXmlData"其它的几乎没变化,运行之后,用Web Development Helper插件监测到GetXmLData返回的内容为:
<ArrayOfBook xmlns="http://schemas.datacontract.org/2004/07/Ajax_WCF" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
<Book>
<Author>Alien</Author>
<ISBN>00001</ISBN>
<Publisher>北京出版社</Publisher>
<Title>c#深入编程(第四版)</Title>
</Book>
<Book>
<Author>Mike</Author>
<ISBN>00002</ISBN>
<Publisher>上海出版社</Publisher>
<Title>ExtJs完全教程</Title>
</Book>
</ArrayOfBook>