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

RSS подписка

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

Статьи - Компьютерное

Перевод документации 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'],
  ...
});

 

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

 

 



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

Поделиться этой страницей



Внимание!


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

 

База Xintrea (стр. 1)

База Rarrugas (стр. 1)

База Balas

База YellowRaven

База Yurons

База Lesnik757

База Shandor

База Sirrichar

База Anatolean (стр. 1)

База Аrmagedec

База SorokinRed

База Deadelf79

База Adgaver (стр. 1)

База Pipitos1983

База Silenn (стр. 1)

База Shlyapnikova - херомантия и ригидность

База Velonski (стр. 1)

База BrokeRU (стр. 1)

База Mcold (стр. 1)

База Alensav (стр. 1)

База Alensav2 (стр. 1)

База Consp11 (стр. 1)

База Kozlov-AE (стр. 1)

База Wwwlir (стр. 1)

База Duwaz (стр. 1)

 

Требуют доработки:

 

База Tairesh

База Ivnglkv

База Kolyag87

База Andyk101

База Garik456456

База Harpokrat

База SalexIzyh

База RuDennn (Bunny-Hop)

База Manakaden

База Vitvrn

База Fanrok

База Grimar

База_Juryak

База Nicolasomsk

База Azatserikbaev

База Shut913

 

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

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