先写个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
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","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}
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的不同。在上面有标注了 也有例子对比
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}
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} );
在写个测试页吧
Code
<!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">-->
<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>
<!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">-->
<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>