初学ExtJs 表格显示后台数据

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

版本 3.4.1

需要json包

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

 <!-- 资源文件 ExtJs 3.4. -->
  <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文件

 /**
  * 数据表格显示
  */
 Ext.onReady(function (){
     //多选框
     var sm = new Ext.grid.CheckboxSelectionModel({
         listeners:{
             'selectionchange':function(obj){
                 var select = grid.getSelectionModel().getSelections();
             }
         }
     });
     //定义读取数据格式
     var dataReader = new Ext.data.JsonReader({
                 totalProperty:'count',
                 root: 'data'
             },[
                     { name: 'strimgname' },
                     { name: 'strostype' },
                     { name: 'icpunum' },
                     { name: 'imemorycapacity' },
                     { name: 'idiskcapacity' }
             ]);
      //数据源
      var store = new Ext.data.Store({
                 proxy: new Ext.data.HttpProxy({
                     url: 'testServlet',
                     method: 'GET'
                 }),
                 reader: dataReader,
                 sortInfo: {field: 'strostype', direction: 'DESC'},
                 autoLoad:false
             });
             store.load({params:{start:0,limit:8}});//加载数据时发送分页参数
      //显示栏
      var dataColumns = new Ext.grid.ColumnModel({

                 columns: [
                     new Ext.grid.RowNumberer(),//行号
                      sm,
                     { header: "虚拟机名称",draggable:true, dataIndex: 'strimgname',sortable: true,resizable:false,
                     renderer:function(value, cellmeta, record,rowIndex){
                     return '<a href="javascript:void(0);" title="'+value+'" onclick=alert("'+record.data.strimgname+'：girdID='+grid.getId()+'，行下标='+rowIndex+'")>'+value+'</a>';
                 }},
                     { header: "类型", dataIndex: 'strostype',resizable:false,sortable: true　},
                     { header: "CUP数量", dataIndex: 'icpunum',sortable: true},
                     { header: "内存", dataIndex: 'imemorycapacity',sortable: true },
                     { header: "硬盘", dataIndex: 'idiskcapacity',sortable: true }
                 ],
                 defaults: {
                     align: 'center'

                 }
             });
     //组装表格
     var grid = new Ext.grid.GridPanel({
                 store: store,
                 cm: dataColumns,
                 renderTo: Ext.getBody(),
                 autoExpandColumn: 1,
                 stripeRows: true,
                 autoHeight: true,
                 buttonAlign:'center',
             //    border: false,
                 sm:sm,
                 disableSelection: true,
                 frame: true,
                 loadMask:true,// '正在加载数据，请稍侯……提示
                 //stripeRows: true, //斑马线效果
                 width: 950,

                 title:'表格',
                 viewConfig: {   forceFit: true  }//使列自动均分
                 ,buttons: [{
                     text: "重新加载"
                         ,handler:function(){
                         store.load({params:{start:0,limit:8}});
                         alert(store.getAt())
                     }
                 }],
                 tbar:new Ext.Toolbar({//顶部工具栏
                      items:[
                         new Ext.form.Label({ text:'名称： ' }),
                         id,{
                             text: '查询'
                          }
                     ]

                 }),
                 bbar:['->',//底部工具栏
                     new Ext.PagingToolbar({//分页组件
                     pageSize:8,
                     store:store,
                     displayInfo:true,
                     emptyMsg:'没有数据显示'
                 })]
             });
 })

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

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

最后贴出效果图：

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