ExtJs----Grid笔记
制作一个简单的Grid
Grid常用功能详解
enableColumnMove : true/false //是否可拖放列
enableColumnResize : true/false //是否可以改变列的宽度
stripeRows : true/false //斑马线效果
如果需要每列自动填满Grid，可以使用viewConfig配置中的foreceFit。即：
Gird支持中文排序需要重写Ext.data.Store的applySort函数：
在单元格中显示红色的字、图片和按钮
给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;
}
}
当然，如果只想修改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参数。
表格视图---Ext.grid.GridView
Ext的表格控件都遵循MVC模型，Ext.data.Store可看做Model模型，Ext.grid.GridPanel中设置各种监听器可看做Controller控制器，而Ext.grid.GridView对应的就是View视图。通常情况下，不需要自行创建Ext.grid.GridView的实例，GridPanel会自行生成对应的实例，并可通过getView()函数来获取当前表格使用的视图实例。
当然，我们也可以为GridView设置初始参数：
后台排序
Grid的后台排序只需在配置Ext.data.Store的时候配置remoteSort:true即可，这样下次排序的时候，Store会向后台提交两个参数：sort和dir。sort表示需要排序的字段，dir表示升序或降序(ASC/DESC)。
属性表格控件----PropertyGrid
上述代码就很容易地构建出一个可编辑的Grid，且各个字段的编辑器都是对应的。如果需要只能看不能动的PropertyGrid，则：
如果需要强制对name列排序，则需要修改Ext.grid.PropertyGrid.prototype.initComponent源码，将store.store.sort('name','ASC')注释掉即可。
下面示例了自定义编辑器的代码：
分组表格控件----Group
上述示例需要关注的是groupField，确定通过哪一项分组。令人困惑的是，GroupingStore要求必须设置sortInfo。同样，也可以通过grid.getView()来获取到Ext.grid.GroupingView的实例。
可拖放的表格
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：
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): 表头的右键事件
1var 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});
var cm = new Ext.grid.ColumnModel([2
{header:'编号',dataIndex:'id'},
3
{header:'名称',dataIndex:'name'},4
{header:'描述',dataIndex:'desc'}5
]);6
7
var data = [8
[1,'name1','desc1'],9
[2,'name2','desc2'],10
[3,'name3','desc3'],11
[4,'name4','desc4'],12
[5,'name5','desc5']13
];14
15
var store = new Ext.data.Store({16
proxy:new Ext.data.MemoryProxy(data),17
reader:new Ext.data.ArrayReader({},[
reader:18
{name:'id'},19
{name:'name'},20
{name:'desc'}21
])22
});23
24
store.load();25
26
var grid = new Ext.grid.GridPanel({27
height:600,28
renderTo:'grid',29
store:store,30
cm:cm31
});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});
var grid = new Ext.grid.GridPanel({2
height:600,3
renderTo:'grid',4
store:store,5
cm:cm,6
viewConfig:{7
forceFit:true8
}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};
Ext.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}
var 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
14
var 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}
//修改列的颜色，使用renderer属性配置如下方法2
var 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)};
var 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})
Ext.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}
viewConfig:{2
columnsText:'显示的列',3
scrollOffset:30, //表格右侧滚动条的宽度，默认是20px4
sortAscText:'升序',5
sortDescText:'降序',6
forceFit:true7
}后台排序
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});
var 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});
grid.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});
var 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});
var reader = new Ext.data.ArrayReader({},[2
{name:'id'},3
{name:'sex'},4
{name:'name'},5
{name:'desc'}6
]);7
8
var 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
16
var store = new Ext.data.GroupingStore({17
reader:reader,18
data:data,19
groupField:'sex',20
sortInfo:{field:'id',direction:"ASC"}21
});22
23
var 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);
var rz = new Ext.Resizable('grid',{2
wrap:true,3
minHeight:100,4
pinned:true,5
handles:'s'6
});7
8
rz.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});
var 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
return10
}11
12
//修改store13
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): 表头的右键事件
