ExtJS4.2學習(三)Grid表格

Ext中的表格功能很是強大，包括排序、緩存、拖動、隱藏某一列、自動顯示行號、列彙總、單元格編輯等實用功能。表格由類Ext.grid.GridPanel定義，繼承自Ext.Panel，其xtype爲grid。在EXT中，表格控件必須包含列定義信息，並指定表格的數據存儲器。表格數據最起碼有列、數據、轉換原始數據這3項。列信息由數組columns定義，表格的數據存儲器由Ext.data.Store來定義。store負責把各類各樣（如二維數組、JSON對象數組、XML文本等）的原始數據轉換成Ext.data.Record類型的對象。經過Ext.data.ArrayStore咱們能夠把任何格式的數據轉化成表格能夠使用的形式，這樣就不須要爲每種數據格式寫一個對應的實現了。
製做一個簡單的表格及屬性說明

<script type="text/javascript"> 
//表格數據最起碼有列、數據、轉換原始數據這3項 
Ext.onReady(function(){ 
    //定義列 
    var columns = [ 
        {header:'編號',dataIndex:'id'}, //sortable:true 可設置是否爲該列進行排序 
        {header:'名稱',dataIndex:'name'}, 
        {header:'描述',dataIndex:'descn'} 
      ]; 
    //定義數據 
    var data =[ 
        ['1','張三','描述01'], 
        ['2','李四','描述02'], 
        ['3','王五','描述03'], 
        ['4','束洋洋','思考者日記網'], 
        ['5','高飛','描述05'] 
    ]; 
    //轉換原始數據爲EXT能夠顯示的數據 
    var store = new Ext.data.ArrayStore({ 
        data:data, 
        fields:[ 
           {name:'id'}, //mapping:0 這樣的能夠指定列顯示的位置，0表明第1列，能夠隨意設置列顯示的位置 
           {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 //自動填滿表格 
    }); 
}); 
      
</script>

主要代碼如上，註釋部分已經寫的很詳細了，你們用到的時候能夠參考下。最終效果以下：

另外，有什麼想說的，歡迎你們在下面留言，你們一塊兒討論進步！


連載中，請你們繼續關注！本文出自個人我的網站思考者日記網