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

  1. ExtJS-4

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

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

Поехали.

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);                     // удаляю запись.

          }
      }]

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

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

  1. 2011-12-04
  2. ExtJS-4
  1. www.sencha.com/learn/the-grid-component/ - sencha.com: Learn The Grid Component
  2. net.tutsplus.com/tutorials/php/working-with-restful-services-in-codeigniter-2/ - Working with RESTful Services in CodeIgniter
  3. www.softcoder.ru/blog/rest-php - Подход REST в PHP
  4. freehabr.ru/blog/extjs/705.html - ExtJS4 The Data Package (перевод официальной документации)
  5. habrahabr.ru/blogs/php/46032/ - RESTful PHP — 5 простых советов
Go Index Test