editor - extjs4 grid - 更改每行的列编辑器

Question

ExtJS4 网格预计每列都有适当的编辑器(cellEditor 或 rowEditor)。如果列的标题字段是 dateField - 日期选择器将应用于该列中的每一行。

我需要的是每行(而不是每列)具有不同字段编辑器的编辑器。

提供Extjs3解决方案here - 不幸的是不适合 Extjs4 的情况。(请检查该链接以查看解释性图像，因为我还无法发布图像)

还有一个名为 property grid 的单列解决方案，但同样 - 它仅支持一列，并且与标准 Ext.grid 组件有很大偏差

我尝试通过自定义column.field并重新加载grid.editingPlugin.editor来手动更改网格编辑器，但总是得到一个没有字段的空白rowEditor面板。

//by default rowEditor applies textField to all cells - I'm trying to force custom numberFiled on apropriate row
var numberField=Ext.form.field.Number();
grid.columns[0].field=numberField;
//destroy current rowEditor's instance 
delete grid.editingPlugin.editor;
//now, upon doubleClick on apropriate cell it should reinitialize itself (initEditor()) - and it does, but is an empty panel

我在这里缺少什么？一旦我删除editingPlugin.editor，一切都应该从头开始，就像第一次调用 rowEditor 时一样，但它会丢失所有字段

Answer 1

Ext4 的解决方案:

我正在寻找解决方案，这个人说属性网格有这种行为。我已经对其进行了调整，使其以一种干净的方式为我工作在 initComponent 上我声明:

this.editors = {
'date'    : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Date',   {selectOnFocus: true})}),
'string'  : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Text',   {selectOnFocus: true})}),
'number'  : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Number', {selectOnFocus: true})}),
'int'  : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Number', {selectOnFocus: true})}),
'boolean' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.ComboBox', {
    editable: false,
    store: [[ true, 'Sim' ], [false, 'Não' ]]
})})
};

我使用这些函数来帮助我(复制):

this.renderCell = function(val, meta, rec) {
    var result = val;
    if (Ext.isDate(val)) {
        result = me.renderDate(val);
    } else if (Ext.isBoolean(val)) {
        result = me.renderBool(val);
    }
    return Ext.util.Format.htmlEncode(result);
};

this.getCellEditor = function(record, column) {
    return this.editors[record.get('type')];
};

最后，将这些函数关联到列:

{text: "Valor", name : 'colunaValor', width: 75, sortable: true, dataIndex: 'valor', width:200,
    renderer: Ext.Function.bind(this.renderCell, this),
    getEditor: Ext.Function.bind(this.getCellEditor, this)
}