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)
}

extjs4网格 - 每行更改列编辑器

1 个答案: