Question

我有一个带有远程商店的extjs 4网格面板。在列的渲染器上有函数，它将ID更改为NAME。大多数时候它工作正常，但有时（~40％）网格显示空列。我试图调试 - 商店已定义，但其项目为空。我心灵商店尚未加载，或已被销毁（如果可能）。

如何使用完整数据正确显示网格？

我的简化代码是：

加载所需的组件

Ext.Loader.setConfig({
    enabled:true
});

Ext.Loader.setPath('Ext.ux', '/js/ux');

Ext.require([
    'Ext.grid.*',
    'Ext.data.*'
]);

Ext.onReady(function () {

创建模型

    Ext.define('Expense', {
        extend:'Ext.data.Model',
        fields:[
            {name:'id', type:'number'},
            {name:'cost_id', type:'string'},
            {name:'comment', type:'string'}

        ]
    });

    Ext.define('Cost', {
        extend:'Ext.data.Model',
        fields:[
            {name:'id', type:'string'},
            {name:'name', type:'string'},
            {name:'displayname', type:'string'}
        ]
    });

创建商店

    store = Ext.create('Ext.data.Store', {
        autoDestroy:true,
        model:'Expense',
        autoLoad:true,
        autoSync:true,
        pageSize:30,
        proxy:{
            type:'ajax',
            url:'/expenses/gettable',
            reader:{
                type:'json',
                root:'data',
                record:'Expense'
            }, writer:{
                type:'json'
            },
            api:{
                create:'/expenses/create',
                update:'/expenses/update',
                destroy:'/expenses/delete'
            }
        }
    });

    costsStore = Ext.create('Ext.data.Store', {
        autoDestroy:true,
        model:'Cost',
        autoLoad:true,
        autoSync:true,
        proxy:{
            type:'ajax',
            url:'/costs/gettable',
            reader:{
                type:'json',
                record:'Cost'
            }, writer:{
                type:'json',

                allowSingle:false
            },
            api:{
                create:'/costs/create',
                update:'/costs/update'
            }
        }
    });

配置网格面板

    grid = Ext.create('Ext.grid.Panel', {
        store:store,
        autoSync:true,
        columns:[
            {
                id:'comment',
                header:'Задача',
                dataIndex:'comment',
                flex:5
            },
            {
                id:'cost',
                header:'Cost',
                dataIndex:'cost_id',
                flex:5,
                editor:{
                    xtype:'combobox',
                    store:costsStore,
                    valueField:'id',
                    displayField:'name',
                    name:'cost_id'
                },
                renderer:function (value, meta, record) {
                    if (value != '') {
                        ind = costsStore.find('id', value);
                        elem = costsStore.getAt(ind);
                        if (elem) {

                            return elem.data['name'];
                        }
                    }
                }
            }
        ],
        renderTo:'editor-grid'
    });

});

我试图在网格渲染事件上手动加载商店：

grid = Ext.create('Ext.grid.Panel', {
    listeners:{
        beforerender:function(){
            store.load();
            costsStore.load();
        }
    }
    ...
});

减少空表到~10％的情况，但不是0％......

我找到的唯一方法是在加载所有商店后设置延迟，然后显示网格，如下所示：

listeners:{
    'load':function(){
        window.setTimeout("getGrid()", 1000);
    }
}

其中getGrid（）是创建grid.panel的函数。

我必须做什么，仅在加载所有商店后显示网格，或者如果数据无法加载则显示错误？

Answer 1

正如sra建议的那样 - 您的问题似乎源于在渲染器中使用商店，而您无法确定商店是否已加载。

我已经在this answer中描述了我认为最优雅的解决方案，并提供了一些代码示例。

使用json存储的网格有时不显示数据

加载所需的组件

创建模型

创建商店

配置网格面板

1 个答案: