初學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, //斑馬線效果 
                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