Extjs中grid 的ColumnModel 屬性配置

一， 用數組的方式配置ColumnModel

var colModel = new Ext.grid.ColumnModel([
{ header:'編號', dataIndex:'id'，width:200},
{ header:'名稱', dataIndex:'name',width:300}
]};

注意：上述寫法ColumnModel的構造參數必須是一個數組，哪怕只有一列。

二、 用JSON對象的方式配置ColumnModel

var colModel = new Ext.grid.ColumnModel({
columns:[ --列集合的定義
{ header:'編號', dataIndex:'id'，width:200},
{ header:'名稱', dataIndex:'name',width:300}
],
defaults:{ --公共屬性配置
 sortable:true,
menuDisabled:true,
width:100
},
listeners:{ --監聽事件
"widthchange":function(cm,colIndx,width){
saveConfig(colIndex,width);
}
}
});

這種寫法的好處是更加的面向對象，也便於繼承。

三、常用屬性介紹：

header 設置列標題
dataIndex 設置列對應數據源的name值
editor 設置在編輯狀態下,指定編輯器
align 設置列標題的對齊方式
widht 設置列的寬度
css 設置列頭的CSS樣式
fixed 表示列頭的寬度是否可以改變，默認為true
hidden 表示是否是隱藏列，默認為false
hideable 表示是否禁止用戶隱藏該列，默認為false
menuDisabled 表示是否禁止列菜單 默認為false
resizable 表示是否禁止列可變大小,默認為false
sortable 表示列是否可排序,默認為false
tooltip 表示列頭部顯示的提示文字
renderer 用於加工單元格的原始數據，
id 列的標識，列的所有單元格包括頭部都是用這個值來創建CSS的class屬性
格式為：
x-grid3-td-id 單元格樣式
x-grid3-td-hd-id 列頭樣式

四、常用方法介紹：

findColumnIndex 根據dataIndex里的值，返回列的索引
getColumnById 返回指定ID的列
getColumnCount 返回列數
getColumnId 返回指定index列的ID
....
該類有很多方法來操作列，具體查看API

五、一個比較完整的實例

Ext.grid.ColumnModel([{ 
id: 列的唯一標識，可以用於定義css，如：(.x-grid-td-topic b { color:#333 }) 
header: 列的名稱 
dataIndex: 在store中本列值的索引 
sortable: 設置本列是否支持排序 
renderer: 列值的渲染函數，定義函數如：function renderName(value, cellmeta, record, rowIndex, columnIndex, store){} 
width : 列寬 
hidden:true 是否隱藏本列 
}]);
//value是當前單元格的值
//cellmeta里保存的是cellId單元格id，id不知道是干啥的，似乎是列號，css是這個單元格的css樣式。
//record是這行的所有數據，你想要什么，record.data["id"]這樣就獲得了。
//rowIndex是行號，不是從頭往下數的意思，而是計算了分頁以后的結果。
//columnIndex列號太簡單了。
//store，這個厲害，實際上這個是你構造表格時候傳遞的ds，也就是說表格里所有的數據，你都可以隨便調用。

function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "<input type='button' value='查看詳細信息' onclick='alert(""" +
"這個單元格的值是：" + value + "" +
"這個單元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}""n" +
"這個單元格對應行的record是：" + record + "，一行的數據都在里邊" +
"這是第" + rowIndex + "行" +
"這是第" + columnIndex + "列" +
"這個表格對應的Ext.data.Store在這里：" + store + "，隨便用吧。" +
""")'>";
return str;
}