пятница, 8 апреля 2011 г.

ExtJS сделать ячейку/столбец Editor Grid нередактируемой

Проблема: на входе имеем таблицу Editor Grid (EditorGridPanel), в которой необходимо запретить редактирование некоторых ячеек, строк или столбцов. Известно, что по умолчанию все ячейки таблицы EditorGridPanel являются редактируемыми.

Решение. Как всегда, разработчики ExtJS продумали все за нас - необходимо перезаписать конфигурационную функцию isCellEditable модели колонок ColumnModel, определяющую возможность редактирования конкретной ячейки по индексу ее колонки и строки.

var store = new Ext.data.Store({...});
var colModel = new Ext.grid.ColumnModel({
  columns: [...],
  isCellEditable: function(col, row) {
    if (col == 2) return false; else return true;
  }
});
var grid = new Ext.grid.GridPanel({
  store: store,
  colModel: colModel,
  ...
});

В приведенном примере разрешается редактировать всю таблицу, кроме третьей колонки - строки и колонки начинают нумерацию с нуля, поэтому в теле функции isCellEditable проверяется значение col, равное 2.

Неплохо, не так ли? Усложним задачу. Что, если нам нужно решить, стоит ли позволять редактировать ячейку в зависимости от данных в другой колонке? Нет ничего проще!

var store = new Ext.data.Store({...});
var colModel = new Ext.grid.ColumnModel({
  columns: [...],
  isCellEditable: function(col, row) {
    if (col == 2){
      rec = store.getAt(row);
      if (rec.get('notEdit') === true)
        return false;
      else
        return true;
    } else
      return true;
  }
});
var grid = new Ext.grid.GridPanel({
  store: store,
  colModel: colModel,
  ...
});

В данном случае проверяется значение поля notEdit рассматриваемой записи, и если в нем хранится true - ячейка в третьем столбце становится нередактируемой. Остальные столбцы и ячейки при этом продолжают нормально функционировать.

3 комментария:

  1. у меня обратная ситуация
    по умолчанию Grid нередактируемый
    потом при нажатии на кнопку добавить
    я вставляю новую строку и ее ка кто надо разрешить редактировать те снять запрет редактирования только на нее

    ОтветитьУдалить
  2. Cosmos, сталкивался с такой же задачей, для себя нашел 2 способа решения.

    1. Добавлять новые строки в таблицу не стандартным способом путем добавления в store пустой записи и установки startEditing(0,0) для вставленной строки, а путем вызова окна с формой для заполнения. Ввели данные новой строки в окне, добавили эти данные в store, таблица автоматически обновилась. Таким образом, нет необходимости вообще работать с непосредственно таблицей и ее isCellEditable - метод прост и поэтому отлично работает.

    2. Все-таки использовать isCellEditable и в теле функции проверять индекс ячейки для разрешения или запрета редактирования. Вставили новую строку в начало таблицы, поставили флаг типа gridIsNowEditable=true, ввели данные нового элемента, сохранили store и обнулили флаг gridIsNowEditable для невозможности редактирования сохраненной новой строки. В isCellEditable проверять gridIsEditable. Требуется создавать механизм проверки индексов, что в общем случае является более сложной задачей по сравнению с первым способом.

    ОтветитьУдалить
  3. Подскажите, пожалуйста, как тоже самое реализовать на ExtJS 4? Ext.grid.ColumnModel убрали в 4 версии.

    ОтветитьУдалить