ExtJs Grid

ExtJs Grid

2013 年 7 月 26 日

9:56

ExtJS中的表格功能很是強大，包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列彙總、單元格編輯等實用功能。

表格由類Ext.gridPanel定義，繼承自Panel，xtype爲Grid。在ExtJs表格控件Grid必須包含列定義信息，並指定表格的數據存儲器store，

列信息由類Ext.grid.ColumnModel定義；

Ext.onReady(function(){     /*         cm對象主要負責表格的列信息，表格包含的列由columns配置屬性來描述，簡稱cm.columns是一個數組，每一行數據元素描述表格的一列信息，         header：表格中顯示的文本；         dataIndex：記錄集字段；         sortable：是否能夠排序；         renderer：列渲染函數；         width：寬度；         format：格式化信息     */     var cm = new Ext.grid.ColumnModel([         {header:'編號',dataIndex:'id'},         {header:'名稱',dataIndex:'name'},         {header:'描述',dataIndex:'descn'}         ]);     var data = [         ['1','name1','descn1'],         ['2','name2','descn2'],         ['3','name3','descn3'],         ['4','name4','descn4'],         ['5','name5','descn5']     ]     /*         var store用來建立數據存儲對象，這也是GirdPanel必須配置的屬性，         做用：把各類各樣的原始數據(二維數組、Json對象數組、xml文本等)轉換成             Ext.data.Reacord類型的對象；         配置參數：             proxy指定獲取數據的方式，MemoryProxy用來解析javascript的對象             renderer表示如何解析這些數據；Ext.data.Reader專門用來解析數組，而且按照那種解析規範來解析；第一個參數表示提供數組下表位置存放的記錄的Id（可選）             Ext.data.ArrayReader中第二個參數表示的record記錄的模型，name指定索引字段mapping表示，指定cm當中的dataIndex是什麼，name能夠指定索引，可是當指定mapping的時候數據顯示根據它來決定                  */     var store = new Ext.data.Store({             proxy:new Ext.data.MemoryProxy(data),             reader: new Ext.data.ArrayReader({},[                 {name:'id',mapping:0},                 {name:'name',mapping:1},                 {name:'descn',mapping:2}             ]),         });         //只有load的時候數據纔可以進行加載         store.load();         var grid = new Ext.grid.GridPanel({                 renderTo:'grid',                 store:store,                 cm:cm,                 width:600,                 height:400             })     });     /**         1、數據顯示不全的緣由，在data這個字段當中都重複了         2、高度和寬度沒有設定              */

數據存儲器由Ext.data.Store定義；

數據存儲根據解析數據的不一樣能夠分爲JsonStore、SimpleStore、GroupingStore等

 如何禁用Gird當中的拖放列功能

在定義grid的對象的時分別設定enableColumnMove和enableColumnResize爲false

 如何實現斑馬線效果，顯示的效果就是不一樣列不一樣的顏色

stripeRows:true,

 如何實現遮罩效果

loadMask:true

 如何設定列的寬度

在定義ColumnModel的時候進行定義width

 如何自主決定每列的寬度

在定義grid的時候定義：

viewConfig:{

forceFit:true

}

說明：

使用了viewConfig後，Grid會根據你在cm裏設置的width按比例分配

 如何讓列的寬度自動伸展填充整個表格

autoExpandColumn:'descn' 它只能制定一列的id，注意必須是id，該id設置在ColumnModel當中

 如何讓Gird支持列排序

在定義列模型的時增長sortable屬性，如：

var cm = new Ext.grid.ColumnModel([

{header:'編號',dataIndex:'id',sortable:true}])

 

 

已使用 Microsoft OneNote 2013 建立。

來自爲知筆記(Wiz)