初学ExtJs 表格显示后台数据

最近开始接触ExtJs，贴出自己的代码，一个简单的表格显示

版本 3.4.1

需要json包

代码清单1、jsp引入的ExtJs文件

 <!-- 资源文件 ExtJs 3.4.1 -->
  <link href="ExtJs/resources/css/ext-all.css" type="text/css" rel="stylesheet"/>
  
  <script type="text/javascript" src="ExtJs/ext-all-debug-w-comments.js"></script>
  <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="ExtJs/ext-lang-zh_CN.js"></script>
  
  <!-- 表格js文件 -->
  <script type="text/javascript" src="ExtIs/viewTable.js"></script>

代码清单2 、viewTable.js文件

 1 /**
 2  * 数据表格显示
 3  */
 4 Ext.onReady(function (){
 5     //多选框
 6     var sm = new Ext.grid.CheckboxSelectionModel({
 7         listeners:{
 8             'selectionchange':function(obj){
 9                 var select = grid.getSelectionModel().getSelections();
10             }
11         }
12     });
13     //定义读取数据格式
14     var dataReader = new Ext.data.JsonReader({
15                 totalProperty:'count',
16                 root: 'data'
17             },[
18                     { name: 'strimgname' },
19                     { name: 'strostype' },
20                     { name: 'icpunum' },
21                     { name: 'imemorycapacity' },
22                     { name: 'idiskcapacity' }
23             ]);
24      //数据源
25      var store = new Ext.data.Store({
26                 proxy: new Ext.data.HttpProxy({
27                     url: 'testServlet',
28                     method: 'GET' 
29                 }),
30                 reader: dataReader,
31                 sortInfo: {field: 'strostype', direction: 'DESC'},
32                 autoLoad:false
33             });
34             store.load({params:{start:0,limit:8}});//加载数据时发送分页参数
35      //显示栏
36      var dataColumns = new Ext.grid.ColumnModel({
37                  
38                 columns: [
39                     new Ext.grid.RowNumberer(),//行号
40                      sm,
41                     { header: "虚拟机名称",draggable:true, dataIndex: 'strimgname',sortable: true,resizable:false,
42                     renderer:function(value, cellmeta, record,rowIndex){
43                     return '<a href="javascript:void(0);" title="'+value+'" onclick=alert("'+record.data.strimgname+'：girdID='+grid.getId()+'，行下标='+rowIndex+'")>'+value+'</a>';
44                 }},
45                     { header: "类型", dataIndex: 'strostype',resizable:false,sortable: true　},
46                     { header: "CUP数量", dataIndex: 'icpunum',sortable: true},
47                     { header: "内存", dataIndex: 'imemorycapacity',sortable: true },
48                     { header: "硬盘", dataIndex: 'idiskcapacity',sortable: true }
49                 ],
50                 defaults: {
51                     align: 'center'
52                     
53                 }
54             });
55     //组装表格
56     var grid = new Ext.grid.GridPanel({
57                 store: store,
58                 cm: dataColumns, 
59                 renderTo: Ext.getBody(),
60                 autoExpandColumn: 1,
61                 stripeRows: true,
62                 autoHeight: true,
63                 buttonAlign:'center',
64             //    border: false,
65                 sm:sm,
66                 disableSelection: true,
67                 frame: true,
68                 loadMask:true,// '正在加载数据，请稍侯……提示
69                 //stripeRows: true, //斑马线效果 
70                  950,
71                 
72                 title:'表格',
73                 viewConfig: {   forceFit: true  }//使列自动均分
74                 ,buttons: [{
75                     text: "重新加载"
76                         ,handler:function(){
77                         store.load({params:{start:0,limit:8}});
78                         alert(store.getAt())
79                     }
80                 }],
81                 tbar:new Ext.Toolbar({//顶部工具栏
82                      items:[
83                         new Ext.form.Label({ text:'名称： ' }),
84                         id,{ 
85                             text: '查询'
86                          } 
87                     ]
88 
89                 }),
90                 bbar:['->',//底部工具栏
91                     new Ext.PagingToolbar({//分页组件
92                     pageSize:8,
93                     store:store,
94                     displayInfo:true,
95                     emptyMsg:'没有数据显示'
96                 })]
97             });
98 })

代码清单3、数据源接收的数据格式（servlet里响应的格式）

1 String str = req.getParameter("limit");
2         String str1 = req.getParameter("start");
3         Test t  = new Test();
4         List<Map<String,String >> list  = t.getData(str,str1);
5         JSONObject obj = new JSONObject();
6         JSONArray js = new JSONArray();
7         obj.put("data", js.fromObject(list));
8         obj.put("count", 10); //统计数量，这里写死10条
9         resp.getWriter().write(obj.toString());//json格式化后输出

最后贴出效果图：

只有一个感觉，界面视图组件化，也是ExtJs的最大特点，丰富的UI