Ext-JS: как отключить редактирование ячеек для отдельных ячеек в сетке?

теперь я создаю веб-приложение с Ext-JS 4.0.2, и я использую редактируемую сетку для управления данными, которые будут показаны для таблицы на той же странице.

чтобы сделать сетку редактируемой, я следовал документации API и использовал следующее:

selType: 'cellmodel',
plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2
    })
]

однако для этой сетки есть несколько ячеек, которые не должны быть изменены.

Я мог бы просто позволить обработчику событий изменить данные обратно в нужное состояние, как только он будет изменен в сетке, но это кажется избитым, трудно поддерживать и нечитаемым. Есть ли лучший способ сделать это? Я читал API, но не могу найти никаких полезных атрибутов.

обновление

Что касается этого конкретного приложения, просто отключите первую строку. Но мне также интересно выбрать несколько сеток и сделать их не редактируемыми (представьте себе игру судоку с сеткой).

8
extjs grid javascript

3 ответов

как я понял из комментариев, вы хотите, чтобы первая строка не редактируется. Есть уродливое, но быстрое решение. Назначьте вашему плагину beforeedit обработчик. И когда событие запускается, проверьте, какая строка редактируется. Если сначала ... --4-->:

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2,
        listeners: {
            beforeedit: function(e, editor){
                if (e.rowIdx == 0)
                    return false;
            }
        }
    })
]

проверить docs на beforeedit.

обновление

врачи говорят, что beforeedit есть такой набор параметров:

beforeedit( Ext.grid.plugin.Editing editor, Object e, Object options )

но есть ошибки. Правильная последовательность есть:

beforeedit( Object e, Ext.grid.plugin.Editing editor, Object options )

я обновил пример из-за этого факта.

12

вы можете указать ColumnModel для объявления редактируемых и не редактируемых столбцов:

    var cm = new Ext.grid.ColumnModel({
        columns: [{
                     dataIndex: 'id',
                     header: 'id',
                     hidden: true
                  },{ 
                     dataIndex: '1',
                     header: '1',                   
                     editor: new Ext.form.TextField({})
                  },{ 
                     dataIndex: '2',
                     header: '2',                   
                     editor: new Ext.form.NumberField({})
                  },{ 
                     dataIndex: '3',
                     header: '3'
                  }]
            });

    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        clicksToEdit: 2,
        cm: cm
        ...

В этом примере столбец id не делится, столбцы 1 и 2 редактируются (с текстовыми и числовыми редакторами), а столбец 3 не редактируется.

обновление:

запретить редактирование строк:

    grid.on('beforeedit', function(event) {
        if (event.row == 0) {
             this.store.rejectChanges();
             event.cancel = true;
         }
    }, grid);
6

Как ziyao Wei упомянул, документация для события beforeEdit неверна. Однако вам нужно ссылаться на параметр "editor", чтобы получить индекс строки и другие значения, а не первый параметр объекта "e". Обновленный пример:

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2,
        listeners: {
                beforeedit: function(e, editor){
                if (editor.rowIdx == 0)
                    return false;
            }
        }
    })
]
0