Реализация отношений главный-подчиненный на примере двух таблиц с одним исходным набором данных в формате JSON.

Иногда с виду простая задача для программиста на одном языке оказывается достаточно проблематичной на другом. Так, например, во фремворке ExtJS 4.1.3 для того чтобы реализовать между таблицами связку главная-подчиненная имея только один источник данных вложенной структуры от меня потребовалось немало терпения и изучения исходных кодов самого фреймворка.

Задача

Исходные данные в формате JSON:

Чтобы упростить задачу и не решать одновременно проблему несоответствия данных и модели описанную в посте Ext.ux.data.reader.SafeJson – безопасный JSON все данные у нас будут соответствовать модели их описания.

Итак, требуется реализовать пример отношения главный-подчиненной таблицы на основе одного источника данных без приминения ассоциаций.

Проблемы

Основная проблема заключается в том, что Ext JS не очень хоршо работает с вложенными данными в рамках обычного хранилища данных Ext.data.Store. У меня получилось подобрать только одну работающую конфигурацию кода.

Проблемное место — загрузка данных в хранилище с детальной информацией. Стандартный Ext.data.reader.Json ведет себя крайне неадекватно, когда мы пытаемся в ручную загрузить данные в хранилище во время его создания через парамет data, как масив так и исходный json (raw).

Решение

Описываем модели данных:

При выборе строки записи на главной таблице в подчиненной таблице должны отображатся все данные поля items, в связи с этим мы не описываем детали поля items в главной модели, к тому же мы это сделать не сможем, так как это массив, а переносим это описание в модель для детальных данных.

Иными словами, для того чтобы в главном хранилище взять массив данных items, мы должны их описать в модели просто как поле «items«.

Поле params используется исключительно в проверочных целях для отображения в главной таблице.

Далее создаем главное хранилище:

И после того как все данные загрузятся выполняется главная для нас процедура onLoad:

 

Исходный код

Работающие исходники и пример:

http://jsfiddle.net/elganz/7SPU5/