Extjs控件EditorGridPanel中使用自定义的editor

点击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);

}