Собираем
информацию
по крупицам

Перевод документации Ext JS 4.2

Ext JS 4.2. Часть 3.6: Создание Модели данных и Хранилища данных
29-09-2013
14:24:47

 

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

 

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

 

Сейчас представление 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'],
  ...
});

 

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

 

 


К списку "Компьютерное"

Интересное на сайте


ПЭВМ "Микроша" » Комплект программ "Редактор и Ассемблер" для ПЭВМ "Микроша"

Часть документации на ПЭВМ "Микроша" с описанием работы текстового редактора и транслятора ассемблера. Данный комплект программ занимал 4Кб: 2Кб уходи...


Классическая анимация » Прыгающая подушка

Оборудование: Pentium-IV, Wacom Graphire3 CTE-630 Среда: Flash 8 Год: 2005   Первая и, видимо, последняя попытка нарисовать мини-мультфильм по т...


Web-разработка » Web Code

Официальная страница / Official page   Web Code - это среда безопасного выполнения алгоритмической части PHP-кода, для PHP4.   Требования: P...

RSS подписка

Подпишитесь на новости сайта по RSS


http://metallolomspb13.ru/ пункт приема цветного металла в спб адреса.
Заправка картриджей в зеленограде. Зеленоград заправка картриджа zeltelecom.com.
http://www.remontnik.ru/remont_vannoj/ ремонт ванной и туалета под ключ.

Внимание!

На этом сайте разрабатывается программа MyTetra и её родственные проекты.

Доступны к просмотру следующие базы знаний:

База Xintrea (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18)

База Rarrugas (1, 2)

База Balas

База YellowRaven

База Yurons

База Lesnik757

База Shandor

База Sirrichar

 

Подробности на странице MyTetra Share.

 WebHamster.Ru
 Домик любопытного хомячка
Яндекс индекс цитирования
Почтовый ящик