Ext2.2用数组为数据源显示Grid的例子

效果如下：


源代码如下：

1. <html>
2. <head>
3. <meta http-equiv="Content-Type" c>
4. <title>Array Grid Example</title>
5. <link rel="stylesheet" type="text/css"
6.   href="js/resources/css/ext-all.css" />
7. <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
9. <script type="text/javascript" src="js/ext-all.js"></script>
11. <script type="text/javascript">
12.   Ext.onReady( function() {
14.     // 数据，使用JSON格式的标准格式。
15.     // 数组用[]
16.     // 数据用逗号分开
17.     var myData = [ 
18.         [ 1, '张三', 3800, 1.73, '1970-01-01' ],
19.         [ 2, '李四', 2800, 1.81, '1980-01-01' ], 
20.         [ 12, '王武', 2000, 1.43, '1988-03-13' ] 
21.     ];
22.     
24.     // 自定义的一个数据格式化方法
25.     // 根据数字进行不同颜色的显示
26.       function highter(val) {
27.         if (val > 1.50) {
28.           return '<span style="color:green;">' + val + '</span>';
29.         } else{
30.           return '<span style="color:red;">' + val + '</span>';
31.         }
32.         return val;
33.       }
35.       // 创建数据集的结构
36.       var store = new Ext.data.SimpleStore( {
37.         fields : [ {
38.           name :"id"
39.         }, {
40.           name :'name'
41.         }, {
42.           name :'price',
43.           type :'int'
44.         }, {
45.           name :'high',
46.           type :'float'
47.         }, {
48.           name :'birthday',
49.           type :'date',
50.           dateFormat :'Y-m-d' // 日期的格式
51.         } ]
52.       });
53.       // 从数组里面装载数据
54.       store.loadData(myData);
56.       // 创建表格
57.       var grid = new Ext.grid.GridPanel( {
58.         store :store,
59.         columns : [ {
60.           id : "id", // 内部的标识
61.           header : "编号", // 显示的标题
62.           width : 60, // 宽度
63.           sortable : true, // 是否可以排序
64.           dataIndex : "id" // 对应数据集的字段
65.         },{
66.           id :'name',
67.           header :"姓名",
68.           width :160,
69.           sortable :true,
70.           dataIndex :'name'
71.         }, {
72.           header :"收入",
73.           width :75,
74.           sortable :true,
75.           renderer :'usMoney', // 使用系统自带的格式化方法
76.           dataIndex :'price'
77.         }, {
78.           header :"身高(米)",
79.           width :75,
80.           sortable :true,
81.           dataIndex :'high',
82.           renderer: highter // 自定义的数据格式化方法
83.         }, {
84.           header :"出生日期",
85.           width :100,
86.           sortable :true,
87.           renderer :Ext.util.Format.dateRenderer('Y年m月d日'), // 自定义的日期显示
88.           dataIndex :'birthday'
89.         } ],
90.         autoExpandColumn :'name', // 这个列将默认占用所有的可用的列宽
91.         height :350, // 高度
92.         width :600, // 宽度
93.         title :'人员信息表格' // 表格的标题
94.       });
96.       grid.render('grid-example'); // 生成到这个id标签里面
97.     });
98. </script>
99. </head>
100. <body>
102. <h1>Grid例子 - <a href="http://www.java2000.net">JAVA世纪网</a> </h1>
103. <div id="grid-example"></div>
104. </body>
105. </html>

后面，将使用java作为数据源，生成Grid，格式为json





http://www.java2000.net/p8756




<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>