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

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

8 голосов
/ 02 августа 2011

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

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

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

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

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

UPDATE

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

Ответы [ 3 ]

12 голосов
/ 02 августа 2011

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

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

Проверьте документы для beforeedit.

ОБНОВЛЕНИЕ

Документыскажем, что beforeedit имеет такой набор параметров: 

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

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

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

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

6 голосов
/ 02 августа 2011

Вы можете указать 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);
0 голосов
/ 25 октября 2016

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

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