Сетка extjs4 - изменение редактора столбцов для каждой строки - PullRequest
Новая
       52

Сетка extjs4 - изменение редактора столбцов для каждой строки

4 голосов
/ 06 июля 2011

Сетка ExtJS4 предполагает соответствующий редактор (cellEditor или rowEditor) для каждого столбца.Если поле заголовка столбца - dateField - селектор даты будет применен к каждой строке в этом столбце.

Мне нужен редактор с разными редакторами полей в строке, а не в столбце.

Решение Extjs3 предоставляется здесь - к сожалению, не подходит для случая Extjs4.(пожалуйста, проверьте эту ссылку, чтобы увидеть пояснительные изображения, потому что я пока не могу публиковать изображения)

Существует также решение с одним столбцом, называемое сетка свойств , но опять же - оно поддерживает только один столбец исильно отличается от стандартного компонента 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

что мне здесь не хватает?как только я удаляю editPlugin.editor, все должно начинаться с начала, как при первом вызове rowEditor, но при этом теряются все поля

1 Ответ

4 голосов
/ 11 августа 2011

Решение для 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)
}
...