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>
<?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>
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
12
<script type="text/javascript">
13
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
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
38 store.load();
39 });
40
41</script>
42
43<div id="example-grid"></div>
44</body>
45</html>
<!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
12
<script type="text/javascript"> 
13
14
Ext.onReady(function() {
Ext.onReady(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
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: 10036
});37
38
store.load();39
});40
41
</script>42
43
<div id="example-grid"></div>44
</body>45
</html>
浙公网安备 33010602011771号