Создание Модели данных и Хранилища данных

К настоящему моменту мы имеем форму для редактирования данных пользователя, и теперь пришло время сделать чтение, редактирование и запись реальных данных пользователей. Перед тем, как мы начнем это делать, проведём небольшие улучшения в коде.

Сейчас представление AM.view.user.List создает хранилище данных прямо в своем коде. Это прекрасно работает, но нам нужна возможность работы с хранилищем из любого другого места приложения. Так же нам нужны не статические данные, которые прописаны в коде, а возможность считывания данных с сервера и возможность их изменения.

Давайте для начала перенесем хранилище данных в отдельный файл /app/store/Users.js:

Ext.define('AM.store.Users', {
  extend: 'Ext.data.Store',
  fields: ['name', 'email'],
  data: [
    {name: 'Ed', email: 'ed@sencha.com'},
    {name: 'Tommy', email: 'tommy@sencha.com'}
  ]
});

Теперь надо сделать два небольших изменения. Во-первых, надо сообщить контроллеру, какое хранилище данных используется. Для этого изменим код контроллера следующим образом:

Ext.define('AM.controller.Users', {
  extend: 'Ext.app.Controller',

  stores: [
    'Users'
  ],

  ...
});

Обратите внимание, что в контроллере можно указать несколько хранилищ данных (настройка stores: имеет окончание "s", т. е. подразумевается множественное число).

Во-вторых, нужно изменить код представления /app/view/user/List.js. В нем нужно просто прописать ссылку на хранилище данных с помощью ID:

Ext.define('AM.view.user.List' ,{
  extend: 'Ext.grid.Panel',
  alias: 'widget.userlist',
  title: 'All Users',

  // Мы вынесли инициализацию хранилища данных из метода initComponent()
  store: 'Users',

  initComponent: function() {

    this.columns = [
  ...
});

Включая в код контроллера Users ссылку на хранилище данных, мы тем самым обеспечиваем автоматическую подгрузку его реализации в браузер а так же обеспечиваем создание ссылки на хранилище, которую мы используем в коде представления (просто используем store: 'Users').

Пока что мы только прописали поля 'name' и 'email' прямо в код хранилища данных. Для работы этого, впринципе, достаточно, но во фреймверке Ext JS 4 есть прекрасный компонент Ext.data.Model, который мы можем использовать для реализации редактирования данных пользователей. Давайте завершим наши изменения тем, что вместо прямого прописывания полей в хранилище данных, начнем использовать модель данных. Создадим файл модели данных /app/model/User.js:

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

Вот и всё, что нужно для определения модели данных. Теперь нам нужно изменить реализацию хранилища данных так, чтобы избавиться от прописывания в коде хранилища названий полей через опцию fields:, и вместо нее прописать использование только что созданной модели:

Ext.define('AM.store.Users', {
  extend: 'Ext.data.Store',
  model: 'AM.model.User', // Вместо опции fields:

  data: [
    {name: 'Ed', email: 'ed@sencha.com'},
    {name: 'Tommy', email: 'tommy@sencha.com'}
  ]
});

И теперь нам нужно уведомить контроллер Users, что в системе имеется модель данных User:

Ext.define('AM.controller.Users', {
  extend: 'Ext.app.Controller',
  stores: ['Users'],
  models: ['User'],
  ...
});

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