ExtJs学习笔记（3）_GridPanel[XML做数据源]

ExtJs学习笔记（3）_GridPanel[XML做数据源]2010-11-16 cnblogs yjmyzz这一节，将学习到除了用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