2

我有一个带有远程商店的 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 的函数。

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

4

1 回答 1

0

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

我已经在这个答案中描述了我认为最优雅的解决方案，并附有一些代码示例。

于 2012-10-01T23:00:38.807 回答