.. / 8.4 ExtJS: GridPanel — табличка с редактированием полей (продолжение)

ExtJS-4

Немного модифицирую предыдущий пример. Модификация будет заключаться в следующем:

Вместо редактирования построчно, редактироваание будет вестись отедльно в каждой ячейке
Синхронизация измененийa будет выполняться не автоматически а по нажатию на кнопку «Save»
Кнопка удаления будет размещена в каждой строке.

Поехали.

1. Раздельное редактирование ячеек

Все изменение заключается в подгрузке другого плагина. Вместо Ext.grid.plugin.RowEditing - Ext.grid.plugin.CellEditing:

var Editing = Ext.create('Ext.grid.plugin.CellEditing');

2. Синхронизация изменений

За автосинхронизацию отвечает свойство autoSync в хранилище. Его в данном случае нужно отключить

var store = Ext.create('Ext.data.Store', {
    autoLoad: true,
    autoSync: false, // указание на автосохранения в хранилище
                    // при каждом изменении одно записи
………………………………………………..

После отключения автосинхронизации нужно озаботиться о кнопке, по нажатию на которую будет производиться синхронизация. Эту кнопку я размещу в верхнем тулбаре там где размещал их в предыдущем примере. Неюзабельно, но для примера сойдет.

tbar: [  // верхний тулбар с кнопками
……………………………….
        {
          text: 'save',
          handler: function(){    // обработчик события нажатия кнопки
               grid.store.sync(); // синхронизация
          }
      }
    ]

На этом синхронизацию изменений можно в принципе считать готовой. Но нужно учесть, что все правки будут пересылаться отдельными запросами. ExtJS позволяет пакетноую отправку запросов, но мне это делать было лень. Подробности пакетной обработки лучше рассмотреть в оригинальном примере. Или в документации свойство Ext.data.proxy.Rest.batchActions

3. Перенос кнопок

В подобных табличках (например список статей в CMS) в правую колонку выносят наиболее распространенны элементы управления. В этом примере я вынесу кнопку удаления из верхнего тулбара в отдельную колонку. По сравнению с предыдущим примером изменится только описание колонок таблички

 var grid = Ext.create('Ext.grid.Panel', {
………………………………………….
columns: [
  {
    xtype:'actioncolumn', // специальный тип колонки в ExtJS для всяких кнопок
      width:50,
      items: [ // массив кнопок. в примере кнопка единственная, но может быть и  много.
        {
          icon: '/images/ext/delete.png', // иконка
          tooltip: 'Delete',              // подсказка
          handler: function(grid, rowIndex, colIndex) { // обработчик нажатия кнопки
                        var rec = grid.getStore().getAt(rowIndex);  // определяю удаляемую запись по номеру строки
                        grid.store.remove(rec);                     // удаляю запись.

          }
      }]

  }
  ],
………………………………………….

На этом все. Пример малоюзабелен, но вполне себе работает:

2011-12-04
ExtJS-4

.. / 8.4 ExtJS: GridPanel — табличка с редактированием полей (продолжение)

1. Раздельное редактирование ячеек

2. Синхронизация изменений

3. Перенос кнопок

Далее