Extjs學習筆記——Grid表格

Ext表格功能包括排序、緩存、拖動、隱藏某列、自動顯示行號、列彙總、單元格編輯等。表格由Ext.grid.GridPanel定義，繼承自Ext.Panel，其xtype爲grid。表格控件包含列定義信息，並指定表格數據存儲器。表格數據包含列、數據、轉換原始數據3項，列信息由columns定義，數據存儲器由Ext.data.ArrayStore定義，store負責原始數據轉換。具體如下：

Ext.onReady(function(){  

    //定義列  
    var columns = [  
        {header:'編號',dataIndex:'id'},
        {header:'名稱',dataIndex:'name'},  
        {header:'描述',dataIndex:'descn'}  
      ];  

    //定義數據  
    var data =[  
        ['1','張三','描述1'],  
        ['2','李四','描述2']
    ];  

    //轉換原始數據爲Ext可以顯示的數據  
    var store = new Ext.data.ArrayStore({  
        data:data,  
        fields:[  
           {name:'id'}, 
           {name:'name'},  
           {name:'descn'}  
        ]  
    });  

    //加載數據  
    store.load();  
      
    //創建表格  
    var grid = new Ext.grid.GridPanel({  
        renderTo:'grid',                                //渲染位置  
        store:store,                                      //轉換後的數據  
        columns:columns,                        //顯示列  
        stripeRows:true,                            //斑馬線效果  
        enableColumnMove: false,         //禁止拖放列  
        enableColumnResize: false,     //禁止改變列寬度  
        loadMask:true,                              //顯示遮罩和提示功能,即加載Loading……  
        forceFit:true                                    //自動填滿表格  
    });  
});