来个类 包含Array数据
渲染页面
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
1
/**/
/*新建Grid类*/
2
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
35
36
37 GridTest = function (config) {
38
39 /**//*定义一个ColumnModel*/
40 this.cm = new Ext.grid.ColumnModel([
41 {header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
42 {header: 'Price', width: 75, sortable: true,dataIndex: 'price'},
43 {header: 'Change', width: 75, sortable: true,dataIndex: 'change'},
44 {header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
45 {header: 'Last Updated', width: 85, sortable: true,dataIndex: 'lastChange'}
46 ]);
47
48 /**//*定义一个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 /**//*定义一个Store*/
60 this.ds = new Ext.data.ArrayStore({
61 // reader:this.sampleReader
62 fields: [
63 {name: 'company'},
64 {name: 'price'},
65 {name: 'change'},
66 {name: 'pctChange'},
67 {name: 'lastChange'}
68 ]
69 });
70
71 this.ds.loadData(myData);
72
73 Ext.applyIf(config,{
74 height:1000,
75 width:600
76 });
77
78 alert(myData);
79 GridTest.superclass.constructor.call(this,config);
80}
81
82 Ext.extend(GridTest,Ext.grid.GridPanel, {} );
83
84
85 Ext.onReady( function () {
86 var gridTest = new GridTest();
87 gridTest.render('grid_main');
88} );
2
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
35
36
37 GridTest = function (config) {
38
39 /**//*定义一个ColumnModel*/
40 this.cm = new Ext.grid.ColumnModel([
41 {header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
42 {header: 'Price', width: 75, sortable: true,dataIndex: 'price'},
43 {header: 'Change', width: 75, sortable: true,dataIndex: 'change'},
44 {header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
45 {header: 'Last Updated', width: 85, sortable: true,dataIndex: 'lastChange'}
46 ]);
47
48 /**//*定义一个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 /**//*定义一个Store*/
60 this.ds = new Ext.data.ArrayStore({
61 // reader:this.sampleReader
62 fields: [
63 {name: 'company'},
64 {name: 'price'},
65 {name: 'change'},
66 {name: 'pctChange'},
67 {name: 'lastChange'}
68 ]
69 });
70
71 this.ds.loadData(myData);
72
73 Ext.applyIf(config,{
74 height:1000,
75 width:600
76 });
77
78 alert(myData);
79 GridTest.superclass.constructor.call(this,config);
80}
81
82 Ext.extend(GridTest,Ext.grid.GridPanel, {} );
83
84
85 Ext.onReady( function () {
86 var gridTest = new GridTest();
87 gridTest.render('grid_main');
88} );
渲染页面
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
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 >
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 >