初学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文件

/**
 * 数据表格显示
 */
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, //斑马线效果 
                 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