ExtJs学习笔记(3)_GridPanel[XML做数据源]
生活随笔
收集整理的這篇文章主要介紹了
ExtJs学习笔记(3)_GridPanel[XML做数据源]
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這一節，將學習到除了用JSON做GridPanel的數據源外，還可以使用XML
?
?一。靜態示例
1.xml文件內容：
?
<?xml?version="1.0"?encoding="UTF-8"?><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調用頁面
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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代碼
<script?type="text/javascript">?????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>
?
轉載于:https://www.cnblogs.com/yjmyzz/archive/2008/08/28/1278949.html
總結
以上是生活随笔為你收集整理的ExtJs学习笔记(3)_GridPanel[XML做数据源]的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 爆牙齿的新发现：先clear:left才
- 下一篇： 镜头像差