ExtJS 4 RowEditing отключить редактирование в одном столбце на основе записи

Я реализую панель сетки с четырьмя последними столбцами, редактируемыми для большинства строк. Проблема в том, что я хотел бы отключить редактирование, скажем, первый, если файл record.get('status') = 4 завершен, и только два из столбцов должны быть доступны для редактирования.

Есть ли способ отключить показ редактирования для этих строк? Я могу сделать это с помощью CellEditing, но хочу продолжать использовать плагин RowEditing.

С уважением, Kristian

Ответы

Ответ 1

Используйте beforeedit событие:

grid.on('beforeedit', function(editor, e) {
  if (e.colIdx === 0 && e.record.get('status') == 4)
    return false;
});

UPDATE
Решение выше не работает для rowEditor.
Однако вы можете отключить необходимое поле на beforeedit. Для этого вы должны иметь доступ к плагину для плагинов. Назначить pluginId для плагина:

plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1,
        pluginId: 'rowEditing'
    })
],

Теперь просто отключите необходимое поле, если выполнены некоторые условия:

grid.on('beforeedit', function(editor, e) {
    if (e.record.get('status') === 4 ){
         grid.getPlugin('rowEditing').editor.form.findField('fieldToDisable').disable();
    }
    else{
        grid.getPlugin('rowEditing').editor.form.findField('fieldToDisable').enable();
   });

Вот демонстрация (попробуйте отредактировать первую строку).

Edit

Если вышеуказанный JSFiddle не работает, попробуйте его обновленную версию.

Ответ 2

(на основе предыдущего примера) альтернативный способ - настроить редактор beforeedit listener:

listeners: {
    beforeedit: function(editor, context) {
        var form   = editor.getEditor().form;
        var field  = form.findField('column_name');
        var status = parseInt(context.record.data.status);
        if(status === 4){field.disable();} else {field.enable();}
    }
}

Ответ 3

Так как ответ @Molecular Man заставляет отключенный столбец выглядеть смешно, когда редактирование строк происходит, я думал о другом способе, который выглядит идеально. Все, что вам нужно сделать, это создать функцию, которая может быть, например:

function fieldFormat() {
    if(isGuest) {
        return null; //is not editable
    } else {
        //how you want the column field config to be formated
        var json = Ext.JSON.decode("{xtype: 'textfield',maxLength: 40}");
        return json;
    }
}

и в сетке вы помещаете что-то вроде этого:

var grid = Ext.create('Ext.grid.Panel', {
    plugins: [grid_rowEditing],
    store: store,
    columns: [
    {
        text     : 'Name',
        dataIndex: 'name',
        field    : fieldFormat()
    }]
});

и когда isGuest истинно, поле 'name' не будет доступно для редактирования. Когда он будет ложным, он будет доступен для редактирования