Question

当我运行此示例时，会导致错误：＆＃34;未捕获TypeError：无法调用方法＆＃39; get＆＃39;未定义＆＃34;，问题是渲染列时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

在服务器端展平结构并将父名称与每个子记录一起发送可能更容易。

另一件事我注意到你的商店是相同的，为什么不只使用1？

Answer 2

这可能是与AJAX调用的异步性质相关的问题，因此当您访问其记录时无法加载store1。

您可以尝试将Ext.create放在store1.load（）调用的回调中：

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

Ext JS是否可以使用商店附加到网格来呈现网格列？

2 个答案: