制作一個簡單的Grid
1
var cm = new Ext.grid.ColumnModel([
2
{header:'編號',dataIndex:'id'},
3 {header:'名稱',dataIndex:'name'},
4 {header:'描述',dataIndex:'desc'}
5]);
6
7var data = [
8 [1,'name1','desc1'],
9 [2,'name2','desc2'],
10 [3,'name3','desc3'],
11 [4,'name4','desc4'],
12 [5,'name5','desc5']
13];
14
15var store = new Ext.data.Store({
16
proxy:new Ext.data.MemoryProxy(data),
17
reader:new Ext.data.ArrayReader({},[
18 {name:'id'},
19 {name:'name'},
20 {name:'desc'}
21 ])
22
});
23
24store.load();
25
26var grid = new Ext.grid.GridPanel({
27 height:600,
28 renderTo:'grid',
29 store:store,
30 cm:cm
31});
Grid常用功能詳解
enableColumnMove : true/false //是否可拖放列
enableColumnResize : true/false //是否可以改變列的寬度
stripeRows : true/false //斑馬線效果
如果需要每列自動填滿Grid，可以使用viewConfig配置中的foreceFit。即：
1var grid = new Ext.grid.GridPanel({
2 height:600,
3 renderTo:'grid',
4 store:store,
5 cm:cm,
6 viewConfig:{
7 forceFit:true
8
}
9});
Gird支持中文排序需要重寫Ext.data.Store的applySort函數：
1Ext.data.Store.prototype.applySort = function() {
2 if (this.sortInfo && !this.remoteSort) {
3 var s = this.sortInfo, f = s.field;
4 var st = this.fields.get(f).sortType;
5 var fn = function(r1,r2){
6 var v1 = st(r1.data[f]), v2=st(r2.data[f]);
7 if (typeof(v1) == "string"){
8 return v1.localeCompare(v2);
9 }
10 return v1 > v2 ? 1: (v1 < v2 ? -1 : 0)
11 };
12 this.data.sort(s.direction,fn);
13 if (this.snapshot && this.snapshot != this.data) {
14 this.snapshot.sort(s.direction, fn);
15 }
16 }
17};
在單元格中顯示紅色的字、圖片和按鈕
1var cm = new Ext.grid.ColumnModel([
2 {header:'編號',dataIndex:'id'},
3 {header:'名稱',dataIndex:'name'},
4 {header:'性別',dataIndex:'sex',renderer:function(value){
5 if (value == 'male') {
6 return "<span style='color:red;font-weight:bold;'>紅男</span><img src='user_male.png'/>"
7 } else {
8 return "<span style='color:green;font-weight:bold;'>綠女</span><img src='user_female.png'/>"
9 }
10 }},
11 {header:'描述',dataIndex:'desc',renderer:fn}
12]);
13
14var fn = function(value, cellmeta, record, rowIndex, columnIndex, store){
15 var str = "<input type='button' value='查看詳細信息' onclick='alert(\""+
16 "這個單元格的值是: " + value + "\\n" +
17 "這個單元格的配置是: {cellId" + cellmeta.cellId + ",Id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
18 "這個單元格對應行的record是:" + record + ", 一行的數據都在里面\\n" +
19 "這是第" + rowIndex + "行\\n" +
20 "這是第" + columnIndex + "列\\n" +
21 "這個表格對應的Ext.data.Store在這里:" + store + ", 隨便用吧。" +
22 "\")'>";
23 return str;
24}
給Grid的行和列設置顏色
//設置行的顏色
viewConfig:{
forceFit:true,
enableRowBody:true,
getRowClass:function(record,rowIndex,p,ds){
var cls = 'white-row';
if (record.data.id % 2 == 0)
{
cls = 'red-row'
} else {
cls = 'yellow-row'
}
return cls;
}
}
1//修改列的顏色，使用renderer屬性配置如下方法
2var fn = function(value, cellmeta, record, rowIndex, columnIndex, store){
3 var value = record.get('color');
4 cell.attr = "style=background-color:" + value;
5 return data;
6}
當然，如果只想修改Grid某一行的樣式，還可以用grid.getView().addRowClass(r,css)；修改Grid某一單元格的樣式，可以用Ext.get(grid.getView().getCell(r,c)).addClass(css)或grid.getVies().getRow(r).style.backgroundColor = "red"。
選擇模型
當單擊某一單元格時，需要被選中的為整行，則使用RowSelectionModel----行選擇模型。行選擇模型默認是支持多選的，如只能單選，需要設置singleSelect參數。
1var grid = new Ext.grid.GridPanel ({
2 renderTo : 'grid',
3 store : store,
4 cm : cm,
5 sm : new Ext.grid.RowSelectionModel({singleSelect:true})
6)};
表格視圖---Ext.grid.GridView
Ext的表格控件都遵循MVC模型，Ext.data.Store可看做Model模型，Ext.grid.GridPanel中設置各種監聽器可看做Controller控制器，而Ext.grid.GridView對應的就是View視圖。通常情況下，不需要自行創建Ext.grid.GridView的實例，GridPanel會自行生成對應的實例，并可通過getView()函數來獲取當前表格使用的視圖實例。
1Ext.get('scroll').on('click',function(){
2 grid.getView().scrollToTop();
3})
當然，我們也可以為GridView設置初始參數：
1viewConfig:{
2 columnsText:'顯示的列',
3 scrollOffset:30, //表格右側滾動條的寬度，默認是20px
4 sortAscText:'升序',
5 sortDescText:'降序',
6 forceFit:true
7}
后臺排序
Grid的后臺排序只需在配置Ext.data.Store的時候配置remoteSort:true即可，這樣下次排序的時候，Store會向后臺提交兩個參數：sort和dir。sort表示需要排序的字段，dir表示升序或降序(ASC/DESC)。
屬性表格控件----PropertyGrid
1var gird = new Ext.grid.PropertyGrid({
2 title:'屬性表格',
3 autoHeight:true,
4 width:300,
5 renderTo:'grid1',
6 source:{
7 "名字":"不告訴你",
8 "創建時間":new Date(Date.parse('12/15/2007')),
9 "是否有效":false,
10 "版本號":.01,
11 "描述":"恩，估計沒有啥可說的"
12 }
13});
上述代碼就很容易地構建出一個可編輯的Grid，且各個字段的編輯器都是對應的。如果需要只能看不能動的PropertyGrid，則：
1grid.on("beforeedit",function(e){
2 e.cancel = true;
3 return false;
4});
如果需要強制對name列排序，則需要修改Ext.grid.PropertyGrid.prototype.initComponent源碼，將store.store.sort('name','ASC')注釋掉即可。
下面示例了自定義編輯器的代碼：
1var grid = new Ext.grid.PropertyGrid({
2 title:'表格屬性',
3 autoHeight:true,
4 width:300,
5 renderTo:'grid',
6 customEditors:{
7 'Start Time':new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
8 },
9 soruce:{
10 'Start Time':'10:00 AM'
11 }
12});
分組表格控件----Group
1var reader = new Ext.data.ArrayReader({},[
2 {name:'id'},
3 {name:'sex'},
4 {name:'name'},
5 {name:'desc'}
6]);
7
8var data = [
9 [1,'male','name1','descn1'],
10 [2,'female','name2','descn2'],
11 [3,'male','name3','descn3'],
12 [4,'female','name4','descn4'],
13 [5,'male','name5','descn5']
14];
15
16var store = new Ext.data.GroupingStore({
17 reader:reader,
18 data:data,
19 groupField:'sex',
20 sortInfo:{field:'id',direction:"ASC"}
21});
22
23var grid = new Ext.grid.GridPanel({
24 store:store,
25 height:300,
26 columns:[
27 {header:'編號',dataIndex:'id'},
28 {header:'性別',dataIndex:'sex'},
29 {header:'名稱',dataIndex:'name'},
30 {header:'描述',dataIndex:'desc'}
31 ],
32 view:new Ext.grid.GroupingView(),
33 renderTo:'grid'
34});
上述示例需要關注的是groupField，確定通過哪一項分組。令人困惑的是，GroupingStore要求必須設置sortInfo。同樣，也可以通過grid.getView()來獲取到Ext.grid.GroupingView的實例。
可拖放的表格
1var rz = new Ext.Resizable('grid',{
2 wrap:true,
3 minHeight:100,
4 pinned:true,
5 handles:'s'
6});
7
8rz.on('resize',grid.syncSize,grid);
Resizable必須放在render之后，否則會出現問題。參數的構成：
第一個參數'grid'：就是說這個可改變大小的條是在div id="grid"這個元素上起作用。
wrap:true 這個參數會在構造Resizable時自動在指定id的外部包裹一層div。
minHeight:100 限制改變大小的最小高度。
pinned:true pinned就是顯示藍色細線和上面的三個小點，突出提示。如果為true，則一直顯示；false則只當鼠標放到上面時才出現。
handles:'s' 's'即'south'。Ext中的東南西北對應上下左右，用來設置拖動的方向。
在同一個表格里拖放
只需將grid的屬性enableDragDrop設置為true，表格就支持了拖拽。但這樣還不能實現真正意義上的拖拽，總會顯示一個禁止放下的圖標。這是因為Grid里面沒有設置DropTarget，就是放置被拖動數據的目標。對grid.container進行如下設置，讓表格的容器成為DropTarget：
1var ddrow = new Ext.dd.DropTarget(grid.container,{
2 ddGroup:'GridDD',
3 copy:false,
4 notifyDrop:function(dd,e,data){
5 //選中了多少行
6 var rows = dd.getDragData(e).rowIndex;
7 if (typeof(index) == 'undefined')
8 {
9 return
10 }
11
12 //修改store
13 for(i = 0 ; i < rows.length;i++) {
14 var rowData = rows[i];
15 if (!this.copy) store.remove(rowData);
16 store.insert(index,rowData);
17 }
18 }
19});
Grid與右鍵菜單
Grid提供了4個與右鍵菜單有關的事件：
contextmenu : (Ext.EventObject e): 全局性的右鍵事件
cellcontextmenu:(Grid this,Number rowIndex, Number cellIndex,Ext.EventObject e): 單元格的右鍵事件
rowcontextmenu:(Grid this,Number rowIndex, Ext.EventObject e): 行上的右鍵事件
headercontextmenu:(Grid this,Number colIndex, Ext.EventObject e): 表頭的右鍵事件