Ext學習筆記——Grid（1）

建立簡單的Grid如同建立一個數據庫表，需要如下四個步驟：

1.建立“列”關係，確定列名；

2.建立“數據”；

3.將數據進行轉換；

4.將列、數據進行關聯。

Ext.onReady(function(){ var sm=new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});//多選，handleMouseDown:Ext.emptyFn表示選擇某行後不勾選前面的多選按鈕 function renderDescn(value,cellmeta,record,rowIndex,columnIndex,store){ //單元格屬性顯示 var str="<input type='button' value='"+value+"' οnclick='alert(/""+ "這個單元格的值是："+value+"//n"+ "這個單元格的配置是：{單元格ID cellId:"+cellmeta.cellId+",列號 id:"+cellmeta.id+",css樣式:"+cellmeta.css+"}//n"+ "這個單元格對應的record是："+record+",該行的姓名是："+record.data['name']+"//n"+ "這個單元格的行號是："+rowIndex+"//n"+ //從0開始計算 "這個單元格的列號是："+columnIndex+"//n"+ //從0開始計算 "這個表格對應的Ext.data.Store是："+store+ //構建表格的ds，表格的數據可以隨便用，呵呵 "/")'>"; return str; } var cm=new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(),//自動行號 sm, //添加多選 {id:'id',header:'編號',dataIndex:'id',width:20,sortable:true}, //sortable:指定列排序 {id:'name',header:'姓名',dataIndex:'name',width:30}, {id:'descn',header:'描述',dataIndex:'descn',width:30,renderer:renderDescn},//renderer單元格屬性函數 {id:'birth',header:'生日',dataIndex:'birth',width:40,type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')} //轉化爲日期型 ]); var data=[ ['1','朱一','班長','1980-01-01T02:58:04'], ['2','胡二','戰士','1981-01-01T02:58:04'], ['3','張三','戰士','1982-01-01T02:58:04'], ['4','李四','戰士','1983-01-01T02:58:04'], ['5','王五','戰士','1982-01-01T02:58:04'] ]; var ds=new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader({},[ {name:'id'}, {name:'name'}, {name:'descn'}, {name:'birth',type:'date',dateFormat:'Y-m-dTH:i:s'} //轉化爲日期型 ]) }); ds.load(); var grid=new Ext.grid.GridPanel({ el:'grid', store:ds, cm:cm, sm:sm, //添加多選 stripeRows: true, //行條紋顯示 //autoExpandColumn:2, //指定列擴展充滿Grid,列號從0開始;或者指定列id viewConfig:{ forceFit:true //全部列按列寬比例自動填滿Grid，若無指定列寬則平分 }, autoHeight:true, //根據行數確定Grid的高 height:150, width:400, title:'Array Grid' }); grid.render(); });

顯示效果如下