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

ExtJS-4

Как правило, в богатых приложениях таблицы используются не столько для отображения, сколько для управления данными - удаления, добавления, редактирования записей

В качестве основы здесь как и всюду я взял пример с официального сайта, только немного сократил. Сейчас я попробую внести возможность редактирования данных на базе примера из предыдущей части, где выводился телефонный справочник. Код практически весь сохраняется, модификация не очень большая. Что меняется?

1. Вводится модель

Первое и самое главное - вводится Модель. Модель (подробности будут отдельно) - это компонент, введенный только в четвертой версии ExtJS. По существу это объект определяющий записи - набор полей с описанием, валидаторы, прокси для чтения-записи данных. А так же ассоциации позволяющие связывать разнорожные модели (например модель товара с моделью поставщика).

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

2. Изменения в хранилище/прокси

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

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

А теперь подробнее разберу что осталось за комментариями.

- rest - такой хитрый способ взаимодействия с сервером по http-протоколу. Он касается только серверной части. Останавливаться на этом не буду, подробности реализации на php можно найти по ссылкам приведенным в конце статьи. Я бы предпочел иметь обычный GET/POST, но как настроить в ExtJS4 прокси на отправку данных по-другому в этом примере я не нашел. Сделать по аналогии с предыдущим примером у меня не получилось.

- reader и writer - читалка и писалка. И то и другое - объекты для обмена данными с сервера.
type: 'json' - тип данных при обмене с сервером.
root: 'data' - объект в json в котором передаются записи (кроме собственно данных передается признак успешного завершения success, и всякая прочая балда опционально)
Чтобы было понятно, приведу пример json-данных которыми происходит обмен с сервером:

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

3. Вводится плагин для редактирования строк

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

  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);}
                }
            }
          ]
    });

В результате получается следующее:

2011-12-04
ExtJS-4

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

1. Вводится модель

2. Изменения в хранилище/прокси

3. Вводится плагин для редактирования строк

Инициализация таблицы:

Далее