ExtJS для новичков — Подготовка к работе со Store

Этот топик является продолжением заметки, оставленой в песочнице. Тут, как и было обещано в заметке, будет более подробно рассказано о использовании обьектов DataProxy, DataReader.

Но для начала рассмотрим структуру, которая содержит в себе уже готовые данные, которыми оперирует Store, это Record.

Представте себе таблицу, сверху у нас названия колонок, а ниже идут строки значений, Record из себя и представляет такую строку значений, с тем отличием, что каждая такая строка содержит в себе и названия колонок-значений. У Record'а два основные свойства:

• fields — содержит массив обьектов класа Field. Эти обьекты как раз заменяют названия колонок, и, к тому еще, расширяют их. Они предназначены для описания соответствующих им значений. Это довольно мощное средство для формирования данных нужного вида. Хочу подробнее рассмотреть его свойства
  
  • allowBlank используется при валидации значения, по умолчанию true, что значит — значение может быть пустым
  • convert — функция-келлбек, которая вызывается Reader'ом при сохранении каждого значения Record'a. Эта функция принимает как параметер и сам record, поэтому у нас есть возможность обьеденять значения, как ето показано в официальной документации (см. дальше).
  • type указывает на тип значения, это может быть целым числом, строкой, или датой, типов много, и от типа иногда зависит как будет отображатся это значение например в Grid'e
  • dateFormat используется для формирования даты, но только если тип значения — date
  • defaultValue уставливает значение по умолчанию
  • name указывает название значение, название колонки в нашей таблице
  • sortDir указывает направление сортировки
  • sortType — тут можна установить свою функцию для сортировки
  • mapping — тут мы указываем каому значению из массива источника будет соответствовать этот Field
• data — это и есть наши данные, каждому елементу массива соответствует обьект Field из массива fields

Пример создания Record'a (из официальной документации)

function fullName(v, record){
  return record.name.last + ', ' + record.name.first;
}

function location(v, record){
  return !record.city ? '' : (record.city + ', ' + record.state);
}

var Dude = Ext.data.Record.create([
  {name: 'fullname', convert: fullName},
  {name: 'firstname', mapping: 'name.first'},
  {name: 'lastname', mapping: 'name.last'},
  {name: 'city', defaultValue: 'homeless'},
  'state',
  {name: 'location', convert: location}
]);

* This source code was highlighted with Source Code Highlighter.

Вернемся к нашим ридерам и прокси.
DataProxy, как уже было отмечено, занимается доставкой информации обьекту класса DataReader (точнее обьекту класа Store, который уже с помощю DataReader декодирует эту информацию), для последующего разбора. В стандартной полной поставке фреймворка есть несколько класов наследующих DataProxy:

• MemoryProxy — используется для получения данных из обычного массива, созданого в приложении
• HttpProxy — использиется для получения данных с помощю AJAX запроса
• ScriptTagProxy — как и HttpProxy, с тем отличием, что етот клас умеет делать кросдоменный AJAX запрос (вспомним, что обычный XmlHttpRequest не может запрашивать данные с других доменов)

Все эти классы наследуют от DataProxy два основные свойства:

• api — список из 4-ох URL на каждое из действий обработкы данных (load, creat, save, destroy), используется только наследниками DataProxy, которые используют AJAX. Об етих URL мы поговорим ниже, когда будем рассматривать работу с Store.
• doRequest — наследуется как свойство, но с последующим присваеванием превращается в функцию, которая и делает основную работу — запрашивает данные у источника. Если вы захочете создать свой тип прокси, то вам придется написать и присвоить / переопределить эту функцию.

Теперь рассмотрим классы наследники DataReader'a. В стандартной полной поставке их, как и прокси, несколько:

• ArrayReader — предназначен для «читания» обычного массива, обычно использиется вместе с MemoryProxy
• JsonReader — используется для декодирования json-строки или «читания» json-массива (ассоциативного, хеш), который считается обьектом
• XmlReader — соответственно, для декодирования XML

Вот пример создания ArrayReader

var fields = Ext.data.Record.create([ // создаем Record с правилами-филдами. он будет использоватся ридером
  {name: 'name', mapping: 1}, // как мы знаем, отщет елементов массива начинается с нуля
  {name: 'last', mapping: 2}   // потому, если тут не использовать маппинг, то name будет использовать нолевой елемент а last - первый (ето просто пример)
]);

var myReader = new Ext.data.ArrayReader({}, fields);

* This source code was highlighted with Source Code Highlighter.

А тут у нас уже JsonReader

var myReader = new Ext.data.JsonReader({
  totalProperty: "results", // это свойство используется для получения общего количества записей
               // (обычно используется при загрузке данных с сервера, по несколько штук, при использовании Pager'a)
  root: "rows",       // тут название элемента, в котором будут данные для создания Record'ов
  idProperty: "id"     // каждый Record получaет от Reader уникальный id, по которому можна легко к нему обратится,
               // свойство id указывает чтоб Reader как id использовал значение из первой колонки нашей "таблички"
  },
  fields
);

* This source code was highlighted with Source Code Highlighter.

Ответ от прокси для JsonReader'a должен быть такого типа (обратите внимание на одинаковые названия эленентов внизу, и значений вверху, для лучшего понимания):

{
  results: 2,
  rows: [
    { id: 1, name: 'Имя 1', last: 'Фамилия 1' },
    { id: 2, name: 'Имя 2' , last: 'Фамилия 2' }
  ]
}

* This source code was highlighted with Source Code Highlighter.

У XmlReader'a немного по другому, названия свойств другие, но почти то же самое

var myReader = new Ext.data.XmlReader({
  totalRecords: "results",
  record: "row",
  id: "id"
}, fields);

* This source code was highlighted with Source Code Highlighter.

При ответе от прокси

<?xml version="1.0" encoding="UTF-8"?>
<dataset>
<results>2</results>
<row>
  <id>1</id>
  <name>Имя 1</name>
  <last>Фамилия 1</last>
</row>
<row>
  <id>2</id>
  <name>Имя 2</name>
  <last>Фамилия 2</last>
</row>
</dataset>

* This source code was highlighted with Source Code Highlighter.

Как мы знаем, в ExtJS довольно много сокращений, поетому создавать Record необязательно, можно сделать так (он создастся автоматически)

var myReader = new Ext.data.XmlReader({
  totalRecords: "results",
  record: "row",
  id: "id",
  fields:[
  {name: "id"},
  "name", // если не используются никакие другие параметры кроме name, то можна использовать вот такую сокращенную запись
  ...
 ]
});

* This source code was highlighted with Source Code Highlighter.

Если хабралюди пожелают, то в следующем топике поговорим уже именно о работе со Store, используя накопленые знания :)

UPD: чтоб было более понятно для чего вообще этот прокси, напишу кратко как Store использует DataProxy и DataReader по порядку:

• Store запрашивает у DataProxy'а метод doRequest с параметром load, DataProxy возвращает Store некий обьект / строку
• этот обьект / строку Store передает DataReader'у, который все это разгребает, и возвращает для Store массив Record'ов
просто пользуется уже готовеньким :)