//列模型
var cm = new Ext.grid.ColumnModel([
{header: "姓名", width: 80, dataIndex: "Name", tooltip: "這是您的姓名"},
{header: "性别", width: 40, dataIndex: "Sex", align: "center"},
{header: "生日", width: 150, format: "Y-m-d", dataIndex: "Birthday"},
{header: "學曆", width: 80, dataIndex: "Education", align: "center"},
{id: "memo", header: "備注", dataIndex: "Memo"}
]);
在上述代碼中,我們看到,每一列的資訊都被封裝在json對象中,并且組成一個數組傳送到Ext.grid.ColumnModel。其中
,dataIndex屬性最需要注意,表示記錄結構中的name屬性值。
我們必須建立DataProxy、DataReader和Store對象,Store對象和GridPanel綁定,GridPanel就會顯示Store中的資料了
我們采用json格式來提供測試資料
*
* 顯示序号
* 通過序号我們一眼就能看到目前表格的行數。Extjs為此專門寫了一個叫Ext.grid.RowNumberer的類,該類通過prototype
* 添加了一個json類型的屬性,其内容和列模型中的配置如出一轍,可以參考源碼
* 從代碼中看出,這是一個特殊的列,沒有列頭說明性文字,寬度為23像素且被固定,不能排序,也沒有菜單。這就是
* RowNumberer
*
* 自定義顯示的内容
* 列模型中提供了一個回調函數renderer,該函數可以根據目前列的資訊進行再加工,函數定義如下:
* renderer: function(value, metadata, record, rowIndex, colIndex, store){
* }
* 參數說明:
* value:原始值
* metadata: 可能的值為css或attr
* record:Ext.data.Record, GridPanel的記錄結構定義
* rowIndex: 行索引
* colIndex: 列索引
* store: Ext.data.Store 資料源
*
* 我們将性别變成對應的圖示
* 修改原有的列模型
*/