json, model, treegrid - странное поведение модели
 

Добрый день! Я новый в extjs, еще мало понимаю, но документацию читать умею. Бьюсь с проблемой 4й день.
Есть сервер, он выдает json, изменить его - нет возможности.

[{"WorkGroup":"Группа поддержки 3D",
        "Statistic":[
            {"Specialist":"Александр Константинович",
            "SCallCount":64,"AverageDuration":0.1136067,"leaf":true},
            {"Specialist":"Татьяна Алексеевна",
            "SCallCount":172,"AverageDuration":0.1058641,"leaf":true},
            {"Specialist":"Алексей Валентинович",
            "SCallCount":72,"AverageDuration":0.4269940,"leaf":true}]},
    {"WorkGroup":"Группа поддержки сервиса КСУП",
        "Statistic":[
            {"Specialist":"Руслан Евгеньевич",
            "SCallCount":67,"AverageDuration":0.1090698,"leaf":true},
            {"Specialist":"Алексей Алексеевич",
            "SCallCount":17,"AverageDuration":0.1125816,"leaf":true},
            {"Specialist":"Анна Владимировна",
            "SCallCount":172,"AverageDuration":0.0632347,"leaf":true},
            {"Specialist":"Мирослав Александрович",
            "SCallCount":315,"AverageDuration":0.0945766,"leaf":true},
            {"Specialist":"Николай Владимирович",
            "SCallCount":7,"AverageDuration":0.2342261,"leaf":true}]},
        ]}

Все бы заработало, переименуй я "Statistic" в "children", заменив "WorkGroup" и "Specialist" на одинаковые названия, но увы, нельзя. И не хочется. Хочется найти элегантное решение.
Дальше код модели

Ext.define('WorkGroupModel', {
   extend: 'Ext.data.Model',
    proxy: {
       type: 'rest',
       url: '/omnireports/ajaxgrid',
       reader: {
          type: 'json'
       }
     },
     fields: [{ name: 'text', mapping: 'WorkGroup' }],
     hasMany: { name: 'children', model: 'StatisticModel', associationKey: 'Statistic' }
})

Ext.define('StatisticModel', {
  extend: 'Ext.data.Model',
    fields: [
      { name: 'text', mapping: 'Specialist' },
      'SCallCount','AverageDuration',
      { name: 'leaf', defaultVale: true }
    ]
})

И маленький тест

WorkGroupModel.load(1, {
  success: function (wg) {
    console.log("WorkGroup: " + wg.get('text'));
      wg.children().each(function (specialist) {
        console.log("Specialist: " + specialist.get('text') + "\n leaf: " + specialist.get('leaf'));
      });
  }
});

Консоль FireBug
Т.е. обращение к элементам модели идет правильно - через text и children.
Далее...

Ext.define('basegrid', {
    extend: 'Ext.tree.Panel',
    xtype: 'tree-grid',
    title: 'Core Team Projects',
    height: 300,
    useArrows: true,
    rootVisible: false,
    multiSelect: true,
    singleExpand: false,
    initComponent: function () {
        this.width = 500;
        Ext.apply(this, {
            store: new Ext.data.TreeStore({
                model: WorkGroupModel,
                proxy: {
                    type: 'rest',
                    url: '/omnireports/ajaxgrid',
                    reader: {
                        type: 'json'
                    }
                },
                    autoLoad: true,
                    folderSort: true
                }),
            columns: [{
                xtype: 'treecolumn',
                text: 'Task',
                flex: 2,
                sortable: true,
                dataIndex: 'text'
            }]
        });
        this.callParent();
    }
});

И скриншот результата

Что я делаю не так? Как быть? А если у элемента будет большая вложенность?

Если вы работаете с версией ExtJs 4.2, то модель лучше унаследовать от Ext.data.TreeModel.

Не тестировал это решение для вашего случая, но связанные модели здесь, как мне кажется не нужны. Лучше попробовать извлекать данные в нужное поле при помощи функции, переданой в параметре convert настроек поля.

Ext.define('MyTreeItemModel', {
   extend: 'Ext.data.TreeModel',
    proxy: {
       type: 'rest',
       url: '/omnireports/ajaxgrid',
       reader: {
          type: 'json'//,
          //root: 'Statistic'
       }
     },
     fields: [
         { 
               name: 'text', 
               convert(value, record) {
                    if (record.data.Specialist) {
                         return record.data.Specialist;
                    }
                    if (record.data.WorkGroup) {
                         return record.data.WorkGroup;
                    }
              }
         }
    ]
})

Если нет желания менять серверный код, то подготовить данные к вставке в Ext.data.TreeStore можно и на клиенте. У библиотеки есть необходимые средства. Загрузка в стор затем через loadData(). Элегеантно или нет такое решение, судить вам.

Почему вы опредилили proxy и в сторе, и в модели?

Обратите внимание ещё вот на этот документ:

http://docs.sencha.com/extjs/4.2.1/#....NodeInterface

К записям, которые вы загрузили в древовидный стор, автоматически добавляются некоторые поля: expanded, loaded и проч.