[转载]EXT核心API详解Ext.widgets(二十)-grid(2)

Ext.grid.EditorGridPanel
可编辑数据表格
Config {
clicksToEdit : Number //点几次开始编辑,默认为2
}

方法
EditorGridPanel()
构造,应为 EditorGridPanel(Object config)
startEditing( Number rowIndex, Number colIndex ) : void
stopEditing() : void
开始停止编辑

事件
afteredit : ( Object e )
beforeedit : ( Object e )
validateedit : ( Object e )

下面我们扩展一下刚才的示例应用一下EditorGridPanel//定义数组
var arr=[
['Bill', 'Gardener','2007-01-02',-10,true],
[ 'Ben', 'Horticulturalist','2007-01-03',-20.1,false],
['你', 'Gardener','2007-02-02',0,true],
['他', 'Gardener','2007-01-04',13,false],
[ '我', 'Horticulturalist','2007-01-05',15.2,false]
];
var reader = new Ext.data.ArrayReader(
...{},
//定义数组到record的映射关系
[
...{name: 'name'},
...{name: 'occupation', mapping: 1},
...{name:'date',type: 'date',dateFormat: 'Y-m-d'}, //用指定的格式转换日期
...{name:'float',type:'float'},
...{name:'bool',type:'bool'}
]
);
//生成元数据
var store=new Ext.data.Store(...{
reader:reader
});
store.loadData(arr);

//自定义可编辑列,从ext的示例抄的,但是却要init郁闷
Ext.grid.CheckColumn = function(config)...{
Ext.apply(this, config);
if(!this.id)...{
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};
//重写了三个方法,捕捉mousedown修改数据
Ext.grid.CheckColumn.prototype =...{
init : function(grid)...{
this.grid = grid;
this.grid.on('render', function()...{
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
onMouseDown : function(e, t)...{
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1)...{
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

renderer : function(v, p, record)...{
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
}

//绑定到bool字段
var checkColumn=new Ext.grid.CheckColumn(...{
header: "布尔值",
dataIndex: 'bool'
});
/**//*
现在配置列信息,为了本地化日期选择器,请包含ext-lang-zh_CN.js,并修改Date.dayNames = ["日","一","二","三","四","五","六"];
在Ext.apply(Ext.DatePicker.prototype, {...})中加入okText:"确定",cancelText:"取消";
*/
var col=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(...{header:'序号',width:30}),
...{header:'姓名',sortable: true,dataIndex:'name'},
...{header:'职业',sortable: true,dataIndex:'occupation'},
...{
id:'datacol',
header:'日期',
sortable:true,
dataIndex:'date',renderer: Ext.util.Format.dateRenderer('Y年m月d日'),//格式化显示
editor:new Ext.form.DateField()
},
...{header:'数值',sortable:true,dataIndex:'float',renderer:formatFloat,align: 'right',editor:new Ext.form.NumberField()}, //自定义显示方式,右对齐
checkColumn //这个"选择框列"看起来的确漂亮些,其实是通过修改背景图片实现的
]);

//配置视图信息
var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText='列显示/隐藏';
//现在我们看看可编辑的数据表格能用了吗
var grid=new Ext.grid.EditorGridPanel(...{
el:Ext.getBody(),
height:200,
width:400,
store:store,
cm:col,
view:view
});
//为什么原例不需要init?
checkColumn.init(grid);
grid.render();

function formatFloat(val)...{
var bgcolor;
if(val>0)...{
bgcolor='#FF0000';
}else if(val<0)...{
bgcolor='#00FF00';
}
else...{
bgcolor='#000000';
}
return( ['<span style="color:',bgcolor,'">',val,'</span>'].join(''));
}

Ext.grid.PropertyGrid
属性表格.继承自EditorGridPanel,用习惯ide的用户都会喜欢这个简单的属性表格,

config{
customEditors : Object //自定义属性编辑器
source : Object //数据源
}

方法
PropertyGrid( Object config )
构造

getSource() : Object
setSource( Object source ) : void
得到和设置数据源

事件
beforepropertychange : ( Object source, String recordId, Mixed value,
propertychange : ( Object source, String recordId, Mixed value, Mixed

同样用一个简单的示例来完成PropertyGrid的学习
var grid=new Ext.grid.PropertyGrid(...{
el:Ext.getBody()
,height:200
,width:400
,viewConfig : ...{forceFit:true}
,customEditors:...{
'年龄':new Ext.grid.GridEditor(new Ext.form.NumberField())
}
,source:...{
'姓名':'blackant'
,'年龄':100
}
});

grid.source['性别']='男';
grid.customEditors['性别']=new Ext.grid.GridEditor(new Ext.form.ComboBox(...{
editable:false
,triggerAction: 'all'
,store: new Ext.data.SimpleStore(...{
fields: ['gender'],
data : [['男'],['女']]
})
,displayField:'gender'
,forceSelection:true
,mode:'local'
}));
grid.render();

选择模式都很容易使用,略过,至于其它的扩展,有时间再慢慢研究了,第一步先以学会使用为主