点击EditorGridPanel中的某一列时,需要根据点击的那一行的其它列的数据进行判断,出现何种表单控件。
例如:
头像类型 头像ID
xxx yyy
点击yyy时需要根据头像类型选择的值进行判断,是出现combox控件还是textfield控件。
解决方案:使用Extjs预留的getCellEditor进行扩展。
部分代码:
var _cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), {//行号
width:xx,
editor:new Ext.form.Numberfield(),
header:"xx",
sortable:true,
dataIndex:"xx",
allowBlank:false
}
]);
var _sm = new Ext.grid.CheckboxSelectionModel({singleSelect : false });//不允许一次选中多行
var _ds = new Ext.data.Store({
baseParams : {'m' : "list"},
proxy : GameOIS.getHttpProxy("/cgi/xxxx"),
reader : new Ext.data.JsonReader({
root : "data",
successProperty : "data"
}, [
"xxx"
]),
autoLoad : false
});
var _grid = new Ext.grid.EditorGridPanel({
autoScroll : true,
stripeRows : true,//隔行换色
border : true,
height : 350,
clicksToEdit : true,
enableDragDrop : false,
loadMask : true,
bodyStyle : "",
layoutConfig : {forceFit : true},
ds : _ds,
cm : _cm,
sm : _sm,
listeners : {
beforeedit : function(e) {
//e.field 获取当前点击的字段名称,返回true或flase 可允许或中止调用editor方法
},
afteredit : function(e) {
//提交:e.record.commit(); 回溯: e.record.reject(); e.field
}
}
_grid.getColumnModel().getCellEditor = function(colIndex, rowIndex) {
var field = this.getDataIndex(colIndex);//获得当前列的的dataIndex
if (field == 'NHeadId') {//点击需要改变以列
var headType = _grid.getStore().getAt(rowIndex).get('SHeadType');
if (/^[12]$/.test(headType)) {//此对象发生改变的前提条件
if(headType == "1") {
return new Ext.grid.GridEditor(new Ext.form.ComboBox(itemConvert({
'type' : 'xx',
'hiddenName' : 'NHeadId'
})));
} else if(headType == "2") {
return new Ext.grid.GridEditor(new Ext.form.ComboBox(itemConvert({
'type' : 'combo',
'hiddenName' : 'xxxxx',
'comboData' : data })));
}
}
}
return Ext.grid.ColumnModel.prototype.getCellEditor.call(this, colIndex, rowIndex);
}