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

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

• Простая Grid Panel

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

Давайте начнем с создания обычного Grid. Ниже описано всё, что необходимо знать для использования компонента Grid:

•  Model и Store (Модель и хранилище

Grid Panel это компонент, который отображает данные, содержащиеся в Store. Store можно рассматривать, как совокупность записей, или Model. Более подробную информацию о Store и Model можно найти в руководстве с офф. сайта. Преимущество такого подхода в чётком разделении функций: Grid Panel только отображает данные, а Store берет на себя заботу о извлечении и сохранении данных с использованием своего прокси-сервера.

Сначала мы должны определить модель (Model). Модель является просто набором полей, с описанием типа данных. Давайте определим модель, которую представляет собой «Пользователь»:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [ 'name', 'email', 'phone' ]
});

Теперь давайте создадим Store, который содержит несколько экземпляров пользователей.

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { 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' }
    ]
});

Ради простоты мы настроили Store, для загрузки данных, прописанных в коде. В реальных приложениях обычно Store настраивается с использованием Proxy(прокси) для загрузки данных с сервера.

• Grid Panel

Теперь у нас есть Model, которая определяет нашу структуру данных, и мы загрузили несколько экземпляров модели в Store, все готово для отображения данных с использованием Grid Panel:

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    store: userStore,
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name'
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email',
            hidden: true
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ]
});

И это все, что нужно сделать. Мы только что создали Grid Panel, которая получает данные из userStore, который мы создали ранее. Наконец, мы определили колонки таблицы, использовали dataIndex для каждой колонки, что указывает какие данные получать столбец из нашего хранилища (Store). Столбец “Name” имеет фиксированную ширину100px,  сортировка отключена, «Email address” по умолчанию скрыт (можно показать, снова с помощью меню на любой другой колонке).

• Визуализация (Renders)

Вы можете использовать свойства визуализации колонок, чтобы изменить способ отображения данных.Визуализации это функция, которая изменяет базовое значение и возвращает новое значение, для отображения. Некоторые из наиболее распространенных средств визуализации включены в Ext.util.Format, но вы можете написать свой собственный:

columns: [
    {
        text: 'Birth Date',
        dataIndex: 'birthDate',
        // format the date using a renderer from the Ext.util.Format class
        renderer: Ext.util.Format.dateRenderer('m/d/Y')
    },
    {
        text: 'Email Address',
        dataIndex: 'email',
        // format the email address using a custom renderer
        renderer: function(value) {
            return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);
        }
    }
]

• Группировка 

Ext.create('Ext.data.Store', {
    model: 'Employee',
    data: ...,
    groupField: 'department'
});

Ext.create('Ext.grid.Panel', {
    ...
    features: [{ ftype: 'grouping' }]
});