Ext读取Json数据-CSDN博客

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}

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

} );

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="../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>