ExtJs GridPanel XML做数据源
1.xml文件内容:
1
<?xml version="1.0" encoding="UTF-8"?>
2
<Data>
3
<Items>
4
<TotalResults>203</TotalResults>
5
<TotalPages>21</TotalPages>
6
<Item>
7
<ASIN>0446355453</ASIN>
8
<Author>Jimmy.Yang</Author>
9
<Manufacturer>Warner Books</Manufacturer>
10
<ProductGroup>Book</ProductGroup>
11
<Title>Master of the Game</Title>
12
</Item>
13
<Item>
14
<ASIN>0446613657</ASIN>
15
<Author>Sidney Sheldon</Author>
16
<Manufacturer>Warner Books</Manufacturer>
17
<ProductGroup>Book</ProductGroup>
18
<Title>Are You Afraid of the Dark?</Title>
19
</Item>
20
21
</Items>
22
</Data>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2.ExtJs调用页面
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
6
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
7
<script type="text/javascript" src="../ext-all.js"></script>
8
<title>ExtJs_Grid_Xml</title>
9
</head>
10
<body>
11![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
<script type="text/javascript">
13![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
Ext.onReady(function() {
15
16
var store = new Ext.data.Store({
17
url: 'GridData.xml',
18
reader: new Ext.data.XmlReader(
19
{ record: 'Item' },
20
["ASIN","Author", "Manufacturer", "ProductGroup", "Title"])
21
});
22![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
24
var grid = new Ext.grid.GridPanel({
25
store: store,
26
columns: [
27
{ id: "ASIN", header: "出版号", width: 120, dataIndex: 'ASIN', sortable: true },
28
{ header: "作者", width: 120, dataIndex: 'Author', sortable: true },
29
{ header: "书名", width: 180, dataIndex: 'Title', sortable: true },
30
{ header: "制作商", width: 115, dataIndex: 'Manufacturer', sortable: false },
31
{ header: "产品组", width: 100, dataIndex: 'ProductGroup', sortable: false }],
32
renderTo: 'example-grid',
33
viewConfig: { columnsText: '显示列', sortAscText: '升序', sortDescText: '降序' },
34
width: 640,
35
height: 100
36
});
37![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
store.load();
39
});
40![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
41
</script>
42![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
43
<div id="example-grid"></div>
44
</body>
45
</html>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)