ExtJS GridPanel Таблицы с редактированием полей

Для создания таблиц с возможностью редактирования в них данных в ExtJS вводится понятие "модель". Модель - это компонент, появившийся в ExtJS 4? который определяет набор полей с описанием, валидаторы прокси для чтения-записи данных в таблицу, а также ассоциации, позволяющие связывать разнородные модели, например, модель товара с моделью поставщика.

Модель водится следующим образом:

Ext.define('Phones', {
    extend: 'Ext.data.Model',
    fields: ['id','city', 'code'],// список полей
    validations: [{// валидаторы
        type: 'length',
        field: 'city', // поле город должно быть непустым
        min: 1
     }]
});

Соответственно меняется и хранилище. Если в предыдущих примерах при создании таблиц указывались поля указывались при описании хранилища, то теперь здесь вместо описания полей идет указание модели.

var store = Ext.create('Ext.data.Store', {
    autoLoad: true,
    autoSync: true, // указание на автосохранения в хранилище при каждом изменении одной записи
    model: 'Phones',// указание модели созданной выше
    proxy: {// описание прокси
            type: 'rest', // способ взаимодействия с сервером
    url:'ajax.php', / адрес серверноего обработчика
        reader: {
            type: 'json',
            root: 'data'
        },
        writer: {
            type: 'json',
            root: 'data'
        },
    }
});

reader и writer прдназначены для чтения и записи данных, присланных с сервера.

type: 'json' - тип данных при обмене с сервером.
root: 'data' - объект в json в котором передаются записи.

Пример данных, отдаваемых сервером:

{'success':'true', // признак нормального завершения
  'message':'Некоторое сообщение',
  'data':[{'id':1,city:'Москва',code:'12-413'}] // данные
}

Далее вводится плагин для редактирования строк.
Можно редактировать как одну ячейку таблицы, так и всю строку целиком.

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

В данном случае мы будем редактировать всю строку.

Заключительным этапом идет создание самой таблицы с дополнительными компонентами.

var grid = Ext.create('Ext.grid.Panel', {
    plugins: [Editing], // указали плагин для редактирования
    store: store,
    … // всякие общие вещи - размер, id, title
    columns: [{ // описание колонок
        text: 'id',
        dataIndex: 'id'// привязка к индексу модели
    }, {
        text: 'City',
        dataIndex: 'city',
        field: { //!! теперь это не текст.
            xtype: 'textfield' //!! теперь это input
        }
    }, {
        header: 'Code',
        dataIndex: 'code',
        field: {//!! теперь это не текст.
            xtype: 'textfield'//!! теперь это input
        }
    }],
    bbar: new Ext.PagingToolbar({// bbar - нижний тулбар с листалкой
            store: store,// указано хранилище
            displayInfo: true,// вывести информацию об общем числе записей
            displayMsg: 'Показано  {0} - {1} из {2}'// формат вывода информации
        }),
    tbar: [  // верхний тулбар с кнопками удаления и вставки
          {
            text: 'Ins',
            handler: function(){
                // при вставке создается пустая запись в  в хранилище
                store.insert(0, new Phones());
                // переход к редактированию новой строки
                Editing.startEdit(0, 0);
            }
        },
          {
            itemId: 'delete', // id кнопки
            text: 'Del',
            handler: function(){
                // определяем какая строка выделена
                var selection = grid.getView().getSelectionModel().getSelection()[0];
                // удаление строки из хранилища
                if (selection) {store.remove(selection);}
            }
        }
      ]
});

В результате выполнения данного кода ExtJS выведет на экран таблицу с возможностью редактирования её данных.



Для добавления функции отдельного редактирования ячеек таблицы необходимо загрузить другой плагин.

Вместо Ext.grid.plugin.RowEditing мы используем Ext.grid.plugin.CellEditing.

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

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

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

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

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

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

Необходимо помнить, что все внесенные изменения в таблицы будут отсылаться на сервер отдельными запросами. Для отправки на сервер пакетных запросов ознакомьтесь в документации с разделом Ext.data.proxy.Rest.batchActions.

Для удобства использования таблицы вынесем кнопку удаления в отдельную колонку тулбара.

var grid = Ext.create('Ext.grid.Panel', {
  columns: [
    {
      xtype:'actioncolumn',// специальный тип колонки для кнопок
        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); // удаление записи
            }
        }]
    }
  ]
});

В результате выполнения обновленного кода ExtJS выведет на экран новую таблицу.