Данные в ExtJS

Перевод статьи http://docs.sencha.com/ext-js/4-1/#!/guide/data

Для работы с данными в ExtJS определен 41 класс, но есть три, более важные чем остальные: Model, Store, Ext.Data.proxy.Proxy. Они используютсфя практически во всех приложениях.

Model и Store

Ext.data.Model представляет собой определенный тип данных в приложениях: например в приложения для электронной коммерции могут быть определены модели пользователей, продуктов, заказов и т.п.

Так можно создать Model:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ]
});

Model как правило используется совместно со Store, который содержит коллекцию экземпляров Модели. Настройка Store для загрузки своих данных проста:

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

Мы настроили наш Store, чтобы использовать прокси Ajax, указав через URL, адрес для загрузки данных. В нашем случае наш сервер возвращает JSON, поэтому мы создали Json reader и прочитали ответ. Store автоматически загружает набор пользовательских экземпляров модели из URL users.json, который должен возвращать строку  в JSON, выглядит которая примерно так:

{
    success: true,
    users: [
        { id: 1, name: 'Ed' },
        { id: 2, name: 'Tommy' }
    ]
}

Store также можно заполнить вручную:

Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { firstName: 'Ed',    lastName: 'Spencer' },
        { firstName: 'Tommy', lastName: 'Maintz' },
        { firstName: 'Aaron', lastName: 'Conran' },
        { firstName: 'Jamie', lastName: 'Avins' }
    ]
});

 Сортировка и группировка

Store могут выполнить сортировку, фильтрацию и группировку локально, и также поддерживают удаленную сортировку, фильтрацию и группировку:

Ext.create('Ext.data.Store', {
    model: 'User',

    sorters: ['name', 'id'],
    filters: {
        property: 'name',
        value   : 'Ed'
    },
    groupField: 'age',
    groupDir: 'DESC'
});

В Store, который мы только что создали, данные будут отсортированы сначала по имени, потом по ID. Он будет фильтроваться, отобразятся только пользователи с именем «Ed»  и данные будут сгруппированы по возрасту в порядке убывания. Легко изменить порядок сортировки, фильтрации и группировки в любое время через Store API.

Прокси

Прокси используются в Store для обработки загрузки и сохранения данных модели . Есть два типа прокси: клиент и сервер. Примеры включают клиентские прокси для хранения в памяти  браузера и в Local Storage, который использует функции HTML 5 при их поддрежке браузером. Сервер прокси предназначен для маршалинга данных на удаленные сервера и поддерживает Ajax, JSONP и Rest.

Прокси-серверы могут быть определены в модели следующим образом:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'age', 'gender'],
    proxy: {
        type: 'rest',
        url : 'data/users',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

// Uses the User Model's Proxy
Ext.create('Ext.data.Store', {
    model: 'User'
});

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

// Gives us a reference to the User class
var User = Ext.ModelMgr.getModel('User');

var ed = Ext.create('User', {
    name: 'Ed Spencer',
    age : 25
});

// We can save Ed directly without having to add him to a Store first because we
// configured a RestProxy this will automatically send a POST request to the url /users
ed.save({
    success: function(ed) {
        console.log("Saved Ed! His ID is "+ ed.getId());
    }
});

// Load User 1 and do something with it (performs a GET request to /users/1)
User.load(1, {
    success: function(user) {
        console.log("Loaded user 1: " + user.get('name'));
    }
});