Перевод статьи 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')); } });