Может ли Ext JS использовать хранилище, не привязанное к сетке, для визуализации столбца сетки?

Question

Когда я запускаю этот пример, он вызывает ошибку: «Uncaught TypeError: Невозможно вызвать метод 'get' of undefined", проблема в том, что sotre1 имеет длину 0 при отображении столбца, но я не могу найти решение решить это. Сценарий может быть неоправданным, но я просто хочу использовать неприкрепленное хранилище для визуализации столбца сетки. Есть ли способ гарантировать загрузку store1 перед визуализацией столбца? Вот код:

Ext.onReady(function(){
Ext.define('File', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'pid']   
});
var store = Ext.create('Ext.data.Store', {
    model: 'File',
    //fields: ['id', 'name', 'pid'],
    proxy: {
        type: 'ajax',
        url: 'file.json',
        reader: {
            type: 'json',
            root: 'files',  
            successProperty: 'success'  
        }
    },
    autoLoad: true
});
var store1 = Ext.create('Ext.data.Store', {
    model: 'File',
    proxy: {
        type: 'ajax',
        url: 'file.json',
        reader: {
            type: 'json',
            root: 'files',  
            successProperty: 'success'  
        }
    },
    autoLoad: true
});
Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    title: 'File info',
    store: store,
    columns: [
        {
            header: 'ID',
            dataIndex: 'id'
        },
        {
            header: 'Name',
            dataIndex: 'name'   
        },
        {
            header: 'ParentName',
            dataIndex: 'pid',
            renderer: function(pid){
                var index = store1.find('id', pid); // find it's parent
                console.log(index);
                var name = store1.getAt(index).get('name');
                return name;
            }
        }
    ]
});

});

Вот файл json:

{
success: true,
files: [
    {id: 1, name: 'root', pid: 1},
    {id: 2, name: 'sub1', pid: 1},
    {id: 3, name: 'sub2', pid: 1},
    {id: 4, name: 'sub1-1', pid: 2},
    {id: 5, name: 'sub1-2', pid: 2}
]   
}

Answer 1

Это может быть проблема, связанная с асинхронной природой вызовов AJAX, поэтому store1 не может быть загружен при доступе к его записям.

Вы можете попытаться поместить Ext.create в функцию обратного вызова store1.load ():

store1.load({
    callback: function() {
        Ext.create('Ext.grid.Panel', ...);
    }
});

Answer 2

Может быть проще выровнять структуру на стороне сервера и отправить имя родителя вместе с каждой дочерней записью.

еще одна вещь, которую я заметил, ваши магазины идентичны, почему бы просто не использовать 1?