来个类 包含Array数据
渲染页面
1
/**/
/*新建Grid类*/
2![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
var
myData
=
[
4
[
'
3m Co
'
,
71.72
,
0.02
,
0.03
,
'
9/1 12:00am
'
],
5
[
'
Alcoa Inc
'
,
29.01
,
0.42
,
1.47
,
'
9/1 12:00am
'
],
6
[
'
Altria Group Inc
'
,
83.81
,
0.28
,
0.34
,
'
9/1 12:00am
'
],
7
[
'
American Express Company
'
,
52.55
,
0.01
,
0.02
,
'
9/1 12:00am
'
],
8
[
'
American International Group, Inc.
'
,
64.13
,
0.31
,
0.49
,
'
9/1 12:00am
'
],
9
[
'
AT&T Inc.
'
,
31.61
,
-
0.48
,
-
1.54
,
'
9/1 12:00am
'
],
10
[
'
Boeing Co.
'
,
75.43
,
0.53
,
0.71
,
'
9/1 12:00am
'
],
11
[
'
Caterpillar Inc.
'
,
67.27
,
0.92
,
1.39
,
'
9/1 12:00am
'
],
12
[
'
Citigroup, Inc.
'
,
49.37
,
0.02
,
0.04
,
'
9/1 12:00am
'
],
13
[
'
E.I. du Pont de Nemours and Company
'
,
40.48
,
0.51
,
1.28
,
'
9/1 12:00am
'
],
14
[
'
Exxon Mobil Corp
'
,
68.1
,
-
0.43
,
-
0.64
,
'
9/1 12:00am
'
],
15
[
'
General Electric Company
'
,
34.14
,
-
0.08
,
-
0.23
,
'
9/1 12:00am
'
],
16
[
'
General Motors Corporation
'
,
30.27
,
1.09
,
3.74
,
'
9/1 12:00am
'
],
17
[
'
Hewlett-Packard Co.
'
,
36.53
,
-
0.03
,
-
0.08
,
'
9/1 12:00am
'
],
18
[
'
Honeywell Intl Inc
'
,
38.77
,
0.05
,
0.13
,
'
9/1 12:00am
'
],
19
[
'
Intel Corporation
'
,
19.88
,
0.31
,
1.58
,
'
9/1 12:00am
'
],
20
[
'
International Business Machines
'
,
81.41
,
0.44
,
0.54
,
'
9/1 12:00am
'
],
21
[
'
Johnson & Johnson
'
,
64.72
,
0.06
,
0.09
,
'
9/1 12:00am
'
],
22
[
'
JP Morgan & Chase & Co
'
,
45.73
,
0.07
,
0.15
,
'
9/1 12:00am
'
],
23
[
'
McDonald\
'
s Corporation
'
,36.76,0.86,2.40,
'
9
/
1 12:00am'],
24
[
'
Merck & Co., Inc.
'
,
40.96
,
0.41
,
1.01
,
'
9/1 12:00am
'
],
25
[
'
Microsoft Corporation
'
,
25.84
,
0.14
,
0.54
,
'
9/1 12:00am
'
],
26
[
'
Pfizer Inc
'
,
27.96
,
0.4
,
1.45
,
'
9/1 12:00am
'
],
27
[
'
The Coca-Cola Company
'
,
45.07
,
0.26
,
0.58
,
'
9/1 12:00am
'
],
28
[
'
The Home Depot, Inc.
'
,
34.64
,
0.35
,
1.02
,
'
9/1 12:00am
'
],
29
[
'
The Procter & Gamble Company
'
,
61.91
,
0.01
,
0.02
,
'
9/1 12:00am
'
],
30
[
'
United Technologies Corporation
'
,
63.26
,
0.55
,
0.88
,
'
9/1 12:00am
'
],
31
[
'
Verizon Communications
'
,
35.57
,
0.39
,
1.11
,
'
9/1 12:00am
'
],
32
[
'
Wal-Mart Stores, Inc.
'
,
45.45
,
0.73
,
1.63
,
'
9/1 12:00am
'
]
33
];
34![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
35![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
36![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
37![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
GridTest
=
function
(config)
{
38
39![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*定义一个ColumnModel*/
40
this.cm = new Ext.grid.ColumnModel([
41![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
42![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header: 'Price', width: 75, sortable: true,dataIndex: 'price'},
43![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header: 'Change', width: 75, sortable: true,dataIndex: 'change'},
44![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
45![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header: 'Last Updated', width: 85, sortable: true,dataIndex: 'lastChange'}
46
]);
47
48![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*定义一个Reader*/
49
// this.sampleReader = new Ext.data.ArrayReader({
50
// root:myData
51
// }, [
52
// {name: 'company'},
53
// {name: 'price', type: 'float'},
54
// {name: 'change', type: 'float'},
55
// {name: 'pctChange', type: 'float'},
56
// {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
57
// ]);
58
59![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*定义一个Store*/
60![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.ds = new Ext.data.ArrayStore(
{
61
// reader:this.sampleReader
62
fields: [
63![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name: 'company'},
64![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name: 'price'},
65![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name: 'change'},
66![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name: 'pctChange'},
67![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name: 'lastChange'}
68
]
69
});
70
71
this.ds.loadData(myData);
72
73![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Ext.applyIf(config,
{
74
height:1000,
75
width:600
76
});
77
78
alert(myData);
79
GridTest.superclass.constructor.call(this,config);
80
}
81![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
82![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Ext.extend(GridTest,Ext.grid.GridPanel,
{}
);
83![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
84![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
85![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Ext.onReady(
function
()
{
86
var gridTest = new GridTest();
87
gridTest.render('grid_main');
88
}
);
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
37
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
42
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
43
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
44
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
45
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
48
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
59
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
60
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
63
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
64
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
65
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
66
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
67
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
68
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
71
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
72
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
73
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
74
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
75
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
76
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
77
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
78
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
79
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
80
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
81
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
82
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
83
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
84
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
85
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
86
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
87
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
88
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
渲染页面
1
<%
@ page language="java" pageEncoding="UTF-8"
%>
2
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>
3
<
html
>
4
<
head
>
5
<
title
>
My JSP 'MyJsp.jsp' starting page
</
title
>
6
<
link
rel
="stylesheet"
type
="text/css"
href
="../extjs/resources/css/ext-all.css"
>
7
<
script
type
="text/javascript"
src
="../extjs/adapter/ext/ext-base.js"
></
script
>
8
<
script
type
="text/javascript"
src
="../extjs/ext-all.js"
></
script
>
9
<
script
type
="text/javascript"
src
="../grid/GridTest.js"
></
script
>
10
</
head
>
11
<
body
>
12
<
div
id
="grid_main"
></
div
>
13
</
body
>
14
</
html
>
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)