這一節，將學習到除了用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>
<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>
<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的數據契約要求)
[DataContract]
public class Book
{
[DataMember]
public string ISBN;
[DataMember]
public string Title;
[DataMember]
public string Author;
[DataMember]
public string Publisher;
}
public class Book
{
[DataMember]
public string ISBN;
[DataMember]
public string Title;
[DataMember]
public string Author;
[DataMember]
public string Publisher;
}
返回Xml數據的方法，注意格式要設置成WebMessageFormat.Xml
[OperationContract]
[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();
}
[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>
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>