先寫個Json資料吧
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1
{"result": [
2
{"username": "kejiangwei", "password":"123", "email":"[email protected]"},
3
{"username": "kejiangwei", "password":"123", "email":"[email protected]"},
4
{"username": "kejiangwei", "password":"123", "email":"[email protected]"},
5
{"username": "kejiangwei", "password":"123", "email":"[email protected]"},
6
{"username": "kejiangwei", "password":"123", "email":"[email protected]"},
7
{"username": "kejiangwei", "password":"123", "email":"[email protected]"}
8
], "totalCount":6}
用OO的思想去寫JS
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1
TestGrid = function (config)
{
2
config = config ||
{};
3
4
this.cm = new Ext.grid.ColumnModel([
5
{
6
header: 'UserName',
7
dataIndex: 'username',
8
width : 80
9
},
{
10
header: 'Password',
11
dataIndex: 'password',
12
width: 80
13
},
{
14
header: 'Email',
15
dataIndex: 'email',
16
width: 100
17
}
18
]);
19
20
this.reader = new Ext.data.JsonReader(
{
21
root : 'result',
22
totalProperty : 'totalCount',
23
fields : [
24
{name: 'username'},
25
{name: 'password'},
26
{name: 'email'}
27
]
28
});
29
30
31
this.store = new Ext.data.Store(
{
32
url: 'data.json',
33
// proxy: new Ext.data.MemoryProxy({url: 'data.json'}),
34
reader:this.reader
35
});
36
37
this.store.load();
38
39
// this.data = [
40
// ["kejiangwei","123","[email protected]"]
41
// ];
42
// this.store = new Ext.data.ArrayStore({
43
// fields : [
44
// {name: 'username'},
45
// {name: 'password'},
46
// {name: 'email'}
47
// ]
48
// });
49
//
50
// this.store.loadData(this.data);
51
52
// var cm = new Ext.grid.ColumnModel([
53
// {
54
// header: 'UserName',
55
// dataIndex: 'username',
56
// width : 80
57
// }, {
58
// header: 'Password',
59
// dataIndex: 'password',
60
// width: 80
61
// }, {
62
// header: 'Email',
63
// dataIndex: 'email',
64
// width: 100
65
// }
66
// ]);
67
//
68
// var reader = new Ext.data.JsonReader({
69
// root : 'result',
70
// totalProperty : 'totalCount',
71
// fields : [
72
// {name: 'username'},
73
// {name: 'password'},
74
// {name: 'email'}
75
// ]
76
// });
77
//
78
//
79
// var store = new Ext.data.Store({
80
// url: 'data.json',
81
//// proxy: new Ext.data.MemoryProxy({url: 'data.json'}),
82
// reader:reader
83
// });
84
//
85
// store.load();
86
87
Ext.applyIf(config,
{
88
width : 300,
89
height : 250//,
//用this的話這些就不用配了上面已經配好了 這樣 簡單 好
90
// store : store,
91
// cm : cm
92
});
93
94
TestGrid.superclass.constructor.call(this, config);
95
}
96
Ext.extend(TestGrid, Ext.grid.GridPanel,
{} );
97
98
Ext.onReady( function ()
{
99
100
var test = new TestGrid();
101
test.render("div_main");
102
103
} ); 用Var 和用this的不同。在上面有标注了 也有例子對比
在寫個測試頁吧
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css" target="_blank" rel="external nofollow" >-->
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="TestGrid.js"></script>
</head>
<body>
<div id="div_main"></div>
</body>
</html>