日期:2014-05-16  浏览次数:20493 次

ExtJs grid中常用属性 总结

问题:使用Grid时,如果出现列标题与复选框错位

使用定义样式

.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
.ext-ie8 .x-menu-item-icon,
.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
解决

?

?

使用grid的遮罩提示时,一定要设表格的height和width。


enableColumnMove和enableColumnResize为false表示禁用拖放列和改变列宽度功能。
默认情况下一次可以选一行或多行。


stripeRows:true显示为斑马线。

问题:自主决定每列的宽度
1.手动指定
cm(columnmudule)支持给每列设置宽度,如果不指定则默认的宽度为100px.

var cm=new Ext.grid.columnModel({
{header:'列头',dataIndex:'数据源索',width:宽度},....});

?

2.自动填充
var gird=new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
viewConfig:{forceFit:true}});

会按照设置的宽度之间的比例进行显示,而不是按照设置的宽度。

?

3.指定自动填充剩余空间的列
也可以指定一列来完成该操作,但该操作要求该列必须定义时指定id值。
var cm=new Ext.grid.columnModel({
{header:'列头',dataIndex:'数据源索',width:宽度,id:'id标识属性'},....});

接下来设定
Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
autoExpandColumn:'id列标识'});


问题:让列支持排序
在建立列模型时指定storable:true

?

问题:中文排序
1.为Ext.data.Store设置一个storeInfo:{field:'列名',direction:'ASC|DESC'}属性。


2.重写Ext.data.Store的applySort函数
Ext.data.Store.prototype.applySort = function() {
??? if (this.sortInfo && !this.remoteSort) {
??????? var s = this.sortInfo, f = s.field;
??????? var st = this.fields.get(f).sortType;
??????? var fn = function(r1, r2) {
??????????? var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
??????????? if (typeof(v1) == "string") {
??????????????? return v1.localeCompare(v2);
??????????? }
??????????? return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
??????? };
??????? this.data.sort(s.direction, fn);
??????? if(this.snapshot && this.snapshot != this.data) {
??????????? this.snapshot.sort(s.direction, fn);
??????? }
??? }
};

该函数可以加在ext-all.js文件的未尾。或者放在html页面的最上面,保证在EXT初始化之后,实际代码调用之前执行。

?

问题:显示日期类型数据列
1.在store的reader属性中增加type和dataFormat两个属性
{name: 'date',type:'date',dateFormat:'Y-j-n H:i:s'}
注意格式化字符串必须要与实际日期的内容相对应。
如日期为2009-5-2 12:30:58 则格式化字符串为'Y-j-n H:i:s'
如日期为2009-05-02 12:30:58 则格式化字符串为'Y-m-d H:i:s'
详细字符串的含义见ext api doc之Date类
以保证能够读取到正确的日期值。

?

2.在ColumnModel中新加配置
{header: '日期',dataIndex: 'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年j月n日')}
其中renderer的格式字符串表示显示的格式是什么。

?

问题:如何在单元格时显示红色的字或图片,按钮等
在ColumnModule的相应列的属性中添加renderer:渲染函数
如:
var cm=new Ext.grid.ColumnModel([
{head:'列头',dataIndex:'数据源索',renderer:渲染函数}]);
渲染函数:
function 函数名(value){
?if(value==值){
??return html+css代码;
?}
?else
?{
??