1var cm = new Ext.grid.ColumnModel([
2);
2);
Grid常用功能详解
enableColumnMove : true/false //是否可拖放列
enableColumnResize : true/false //是否可以改变列的宽度
stripeRows : true/false //斑马线效果
如果需要每列自动填满Grid,可以使用viewConfig配置中的foreceFit。即:
1);
Gird支持中文排序需要重写Ext.data.Store的applySort函数:
1;
在单元格中显示红色的字、图片和按钮
1var cm = new Ext.grid.ColumnModel([
2}
2}
给Grid的行和列设置颜色
//设置行的颜色
}
}
1//修改列的颜色,使用renderer属性配置如下方法
2}
2}
当然,如果只想修改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参数。
1;
表格视图---Ext.grid.GridView
Ext的表格控件都遵循MVC模型,Ext.data.Store可看做Model模型,Ext.grid.GridPanel中设置各种监听器可看做Controller控制器,而Ext.grid.GridView对应的就是View视图。通常情况下,不需要自行创建Ext.grid.GridView的实例,GridPanel会自行生成对应的实例,并可通过getView()函数来获取当前表格使用的视图实例。
1)
当然,我们也可以为GridView设置初始参数:
1}
后台排序
Grid的后台排序只需在配置Ext.data.Store的时候配置remoteSort:true即可,这样下次排序的时候,Store会向后台提交两个参数:sort和dir。sort表示需要排序的字段,dir表示升序或降序(ASC/DESC)。
属性表格控件----PropertyGrid
1);
上述代码就很容易地构建出一个可编辑的Grid,且各个字段的编辑器都是对应的。如果需要只能看不能动的PropertyGrid,则:
1);
如果需要强制对name列排序,则需要修改Ext.grid.PropertyGrid.prototype.initComponent源码,将store.store.sort('name','ASC')注释掉即可。
下面示例了自定义编辑器的代码:
1);
分组表格控件----Group
1);
上述示例需要关注的是groupField,确定通过哪一项分组。令人困惑的是,GroupingStore要求必须设置sortInfo。同样,也可以通过grid.getView()来获取到Ext.grid.GroupingView的实例。
可拖放的表格
1rz.on('resize',grid.syncSize,grid);
Resizable必须放在render之后,否则会出现问题。参数的构成:
第一个参数'grid':就是说这个可改变大小的条是在div > 1);