ExtJs. Один запрос, несколько Ext.data.Store.

Не так давно я рассказывал о библиотеке ExtJs, ей же будет посвящена сегодняшняя заметка. Эта заметка расчитана на подготовленного читателя, который уже разобрался с базовыми понятиями. Но и новичку будет полезно взглянуть на то, что предлагает эта библиотека, возможно захочется стать подготовленным =) Комментарии будут подробными.

Стоит заметить, что речь пойдет о второй версии, которая сейчас значиться Release Candidate 1 и доступна для скачивания по ссылке

Сегодня речь пойдет об Ext.data.Store. Объект удачный и используется во множестве виджетов в качестве источника данных. Обычный подход заключается в том, чтобы создать подгружающий себя объект и вызывать метод load(), для его загрузки.

//Инициализируем соединение
var rCon = new Ext.data.Connection({
    //Урл "кормящего" файла =)
    url:    '/data.php',
    //Метод
    method: 'POST',
    //Параметры, которые передадутся в запросе
    extraParams: {'act' : 'get_requests'}
});
//Само хранилище
var rDs = new Ext.data.Store({
    //Прокси с соединением, созданным выше
    proxy: new Ext.data.HttpProxy(rCon),
    //"Читатель" ответов, приходящих в формате JSON
    reader: new Ext.data.JsonReader({
        //Какое свойство читать
        root: 'requests',
        //Какое свойство отвечает за кол-во записей
        totalProperty: 'total_requests',
        //Поля записей
        fields: [
        'requests_key',
        'requests_name'
        ]
    })
});
rDs.load();

Так выглядит обычное создание и загрузка хранилища. При вызове метода load() идет асинхронных запрос к серверу, получаются данные и далее с ними делается то, что нужно. Вcё замечательно. Есть одно "но". Хранилище в силу своей универсальности используется и для ComboBox - выпадающих списков в формах. А этих самых ComboBox в одной форме может быть много. У меня, например 19 =) Таким образом, реализуя приведенную выше схему, мы получим 19 асинхронных вызовов. А это не очень хорошо.

Известно, что у браузеров есть ограничение на количество одновременных вызовов. Благодаря комментариям, мы знаем, что это 3 для FF и 2 для IE. И мы получаем сильное снижение производительности. Это если не брать в расчет проблемы с обработкой 19 вызовов, и синхронизации загрузки с отображением. Ведь если не успеют загрузиться хранилища, а мы уже начнем показывать форму, будет не очень красиво.

Продумав это всё в голове, я пришел к выводу, что надо действовать по-другому. Надо наполнить все 19 хранилищ за один запрос. Поиски на форуме не привели к нахождению решения. Хотя пару идей я получил. В рецепте, приведенном ниже будет использован метод loadData(), вместо load(). Который просто загружает уже пришедшие данные в хранилище, никуда не обращаясь. Я не буду приводить код для 19 хранилищ, приведу для двух.

//Создаем record. Пригодится для "читателя" хранилища.
dsDataRecord = new Ext.data.Record.create([
//Пишем название свойства и мапим его
//на второй элемент массива пришедших данных
{name : 'data_key', mapping : 1},
{name : 'data_name', mapping: 2}
]);
//Хранилище номер раз.
dataStore = new Ext.data.Store({
    //Читатель на этот раз "массивный" а не JSON =)
    reader: new Ext.data.ArrayReader({
        //Первый элемент массива для упорядочивания. Он уникальный.
        id: 0
        //Наш record.
    }, dsDataRecord)
});

//Создаем record. Пригодится для "читателя" хранилища.
dsDigitRecord = new Ext.data.Record.create([
//Пишем название свойства и мапим его
//на второй элемент массива пришедших данных
{name : 'digit_key', mapping : 1},
{name : 'digit_name', mapping : 2}
]);
//Хранилище номер два.
digitStore = new Ext.data.Store({
    //Читатель на этот раз "массивный" а не JSON =)
    reader: new Ext.data.ArrayReader({
        //Первый элемент массива для упорядочивания. Он уникальный.
        id: 0
        //Наш record.
    }, dsDigitRecord)
});
//AJAX-запрос на все данные
comboStoreRequest = Ext.Ajax.request({
    //Урл "кормящего файла"
    url: 'data.php',
    //В случае успешного запроса
    success: function(result){
        //Преобразуем JSON-ответ в объект
        comboStore = Ext.util.JSON.decode(result.responseText);
        //Загрузим массив данных первое хранилище
        dataStore.loadData(comboStore.data);
        //Загрузим массив данных во второе хранилище
        digitStore.loadData(comboStore.digit);
    },
    //Метод
    method: 'POST',
    //Параметры вызова
    params: {act : 'get_data'}
});

Приведенный код тоже не слишком сложен. Самое интересное, для меня, было сформировать теперь выдачу с сервера JSON-данных, чтобы их "прожевал" ArrayReader. И сделал из них массивы, приемлемые для загрузки в хранилище.

На основе документации, можно прийти к выводу, что ArrayReader ожидает данные в виде объектов вида:

[[1, key1, name1],[2, key2, name2],[3, key3, name3]]

Значит в PHP нам необходимо иметь массив, повторяющий приведенную структуру и применить к нему json_encode()

<?php
//Массив с данными
$data_array[] = array(1, "data_key1", "data_name1");
$data_array[] = array(2, "data_key2", "data_name2");
$data_array[] = array(3, "data_key3", "data_name3");
//Выводим JSON-массив
echo json_encode($array);
?>

Первый пункт выполнен. Этими данными вполне можно "накормить" один ArrayReader. А у нас их два. А ответ от сервера один. Значит надо наши массивы упаковать как свойства объекта. И обращаться к ним при загрузке в хранилище. Для этого на сервере нужен следующий PHP-код:

<?php
//Первый массив
$data_array[] = array(1, "data_key1", "data_name1");
$data_array[] = array(2, "data_key2", "data_name2");
$data_array[] = array(3, "data_key3", "data_name3");
//Второй массив
$digit_array[] = array(1, "digit_key1", "digit_name1");
$digit_array[] = array(2, "digit_key2", "digit_name2");
$digit_array[] = array(3, "digit_key3", "digit_name3");
//Собираем всё в один массив.
$data = array('data' => $data_array, 'digit' => $digit_array);
//Выводим окончательный ответ.
echo json_encode($data);
?>

Готово. Теперь мы передаем JSON-объект с двумя свойствами, которые являются массивами данных. И мы можем загрузить их в наши dataStore. Задача выполнена =)