天天看點

ext_GridPanel1_2

//列模型
	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  資料源
 *    
 * 我們将性别變成對應的圖示
 * 修改原有的列模型
 */