Использование ExtJS. Компонент Grid. Часть 2.

Перевод статьи http://www.sencha.com/learn/the-grid-component/

Продолжение.

Модель выделения

В основном Grid используется для отображения данных, но бывает необходимость редактирования, обновления данных. Grid имеет несколько моделей выделения данных. Два основных типа это: 1. Выделение всей строки (всех ячеек); 2. Выделение ячейки в строке.

Ext.create('Ext.grid.Panel', {
    selType: 'cellmodel',
    store: ...
});

При выделении только ячеек (Cell Selection) перемещение с клавиатуры будет происходить от ячейки к ячейке, а не от строки к строке. Cell selection используется в основном для редактирования прямо в ячейке.

Редактирование

Есть две возможности редактирования: редактирование строки и редактирование в ячейке

Редактирование ячеек

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

Ext.create('Ext.grid.Panel', {
    ...
    columns: [
        {
            text: 'Email Address',
            dataIndex: 'email',
            editor: 'textfield'
       }
    ]
});

Если необходимо иметь больше контроля над вводимыми данными, то можно указать дополнительные параметры конфигурации редактирования (editor). Например ниже, для ячейка не принимает пустые значения, необходимо, что либо ввести:

columns: [
    {
        text: 'Birth Date',
        dataIndex: 'birthDate',
        editor: 'datefield'
    }
]

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

Теперь когда мы определили редактируемые колонки и параметры редактирования, мы должны определить модель выделения (Model Selection). Давайте используем выделение ячеек (Cell selection)

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'cellmodel'
});

Наконец, чтобы разрешить редактирование нам нужно настроить объявить использование плагина.

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ]
});

 

Редактирование строки

 Редактирование строки позволяет редактировать всю строку за раз. Редактирование строки настраивается точно также как и редактирование ячейки, только необходимо поменять используемый плагин на Ext.grid.plugin.RowEditing и установить selType в rowModel.

Paging

Иногда набор данных слишком велик, чтобы показать все на одной странице. Grid Panel поддерживает два различных метода подгрузки(дозагрузки) с помощью панели инструментов, которая загружает данные постранично с помощью спец кнопок предыдущая / следующая.

Сначала необходимо настроить Store для поддержки Paging. В приведенном ниже примере мы добавляем PageSize в Store, и настраиваем reader с totalProperty:

Ext.create('Ext.data.Store', {
    model: 'User',
    autoLoad: true,
    pageSize: 4,
    proxy: {
        type: 'ajax',
        url : 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            totalProperty: 'total'
        }
    }
});

});

TotalProperty указывает reader-у, где можно получить в ответ общее число результато в JSON. Этот Store настроен на получение данных в JSON, который выглядит примерно так:

{
    "success": true,
    "total": 12,
    "users": [
        { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" },
        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
        { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }
    ]
}

Панель инструментов Paging

Теперь, когда мы настроили наш Store для поддержки дозагрузки(подкачки), все, что осталось, это настроить панель инструментов Paging. Вы можете поместить эту панель в любом месте вашего приложения, но обычно он пристыкован к Grid Panel:

 

Ext.create('Ext.grid.Panel', {
    store: userStore,
    columns: ...,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: userStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]
});

Paging Scroller

Grid поддерживает бесконечную прокрутку в качестве альтернативы использования панели инструментов Paging. Ваши пользователи могут прокручивать тысячи записей без снижения производительности рендеринга всех записей на экране одновременно.

 

Ext.create('Ext.grid.Panel', {
    // Use a PagingGridScroller (this is interchangeable with a PagingToolbar)
    verticalScrollerType: 'paginggridscroller',
    // do not reset the scrollbar when the view refreshs
    invalidateScrollerOnRefresh: false,
    // infinite scrolling does not support selection
    disableSelection: true,
    // ...
});