先写个Json数据吧
用OO的思想去写JS
在写个测试页吧
1{"result": [
2 {"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
3 {"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
4 {"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
5 {"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
6 {"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
7 {"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"}
8], "totalCount":6}
2 {"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
3 {"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
4 {"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
5 {"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
6 {"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
7 {"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"}
8], "totalCount":6}
用OO的思想去写JS
1TestGrid = 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","kejiangwei@163.com"]
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}
96Ext.extend(TestGrid, Ext.grid.GridPanel, {});
97
98Ext.onReady(function(){
99
100 var test = new TestGrid();
101 test.render("div_main");
102
103});
用Var 和用this的不同。在上面有标注了 也有例子对比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","kejiangwei@163.com"]
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}
96Ext.extend(TestGrid, Ext.grid.GridPanel, {});
97
98Ext.onReady(function(){
99
100 var test = new TestGrid();
101 test.render("div_main");
102
103});
在写个测试页吧
Code