ExtJS网格组合呈现程序不工作

我在ExtJS 4.2.1应用程序中有一个网格，它有一个带有组合编辑器的可编辑列

我需要使用组合的

DisplayField

中的值呈现列，但是

comboStore.getCount（）=0

这是我的表格：

Ext.define('App.employee.Grid', {
    extend: 'Ext.grid.Panel',
    requires: ['Ext.grid.plugin.CellEditing'],
    alias: 'widget.employee.grid',

    config: {
        LocationId: 0
    },

    initComponent: function() {

        var me = this,
            store = me.buildStore(),
            comboStore = Ext.create('App.store.catalog.Location', { autoLoad: true });

        me.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToMoveEditor: 1,
            autoCancel: false,
            listeners: {
                edit: function(editor, e) {

                }
            }
        });

        me.cellEditing = new Ext.grid.plugin.CellEditing({
            clicksToEdit: 1
        });


        Ext.applyIf(me, {
            plugins: [me.rowEditing],
            columns: [{
                xtype: 'rownumberer',
                text: '#',
                width: 50,
                sortable: false,
                align: 'center'
                //locked: true
            },{
                text: 'Number',
                dataIndex: 'EmployeeNumber',
                align: 'center',
                width: 90
            }, {
                text: 'Name',
                dataIndex: 'EmployeeName',
                flex: 1
            }, {
                text: 'Location',
                dataIndex: 'LocationId',
                width: 140,
                renderer: function(value) {

                    // HERE!!!
                    // me.comboStore.getCount() = 0 so I never get a record

                    var record = me.comboStore.findRecord('LocationId', value); 
                    return record.get('Description');
                },
                editor: {
                    xtype: 'combobox',
                    typeAhead: true,
                    triggerAction: 'all',
                    store: comboStore,
                    displayField: 'Description',
                    valueField: 'LocationId',
                    queryMode: 'local',
                    listConfig: {
                        width: 250,
                        // Custom rendering template for each item
                        getInnerTpl: function() {
                            return '<b>{Code}</b><br/>(<span style="font-size:0.8em;">{Description}</span>)';
                        }
                    }
                }
            }],

            store: store,

        });


        me.callParent(arguments);
    }

});

Ext.define（'App.employee.Grid'{
扩展：“Ext.grid.Panel”，
需要：['Ext.grid.plugin.CellEditing']，
别名：“widget.employee.grid”，
配置：{
位置ID:0
},
initComponent:function（）{
var me=这个，
store=me.buildStore（），
comboStore=Ext.create（'App.store.catalog.Location'，{autoLoad:true}）；
me.rowEditing=Ext.create（'Ext.grid.plugin.rowEditing'{
单击移动编辑器：1，
自动取消：错误，
听众：{
编辑：函数（编辑器，e）{
}
}
});
me.celleediting=新建Ext.grid.plugin.celleediting({
单击编辑：1
});
Ext.applyIf（我{
插件：[me.rowEditing]，
栏目：[{
xtype:'行编号者'，
正文：“#”，
宽度：50，
可排序：false，
对齐：“居中”
//锁定：对
},{
文本：“编号”，
数据索引：“EmployeeNumber”，
对齐：'居中'，
宽度：90
}, {
文本：“名称”，
数据索引：“EmployeeName”，
弹性：1
}, {
文本：“位置”，
dataIndex:'LocationId'，
宽度：140，
渲染器：函数（值）{
//这里！！！
//me.comboStore.getCount（）=0，因此我从未获得记录
var record=me.comboStore.findRecord（'LocationId'，value）；
返回记录.get（'Description'）；
},
编辑:{
xtype:“组合框”，
是的，
触发动作：“全部”，
商店：comboStore，
displayField:'说明'，
valueField:'LocationId'，
queryMode:'本地'，
列表配置：{
宽度：250，
//每个项目的自定义渲染模板
getInnerTpl:函数（）{
返回“{Code}
（{Description}）”；
}
}
}
}],
店:店,，
});
me.callParent（参数）；
}
});

问题出在

呈现程序

函数中，因为

组合存储

总是空的。奇怪的是，在我的视图中，如果我单击编辑行并打开组合，组合中就有值

[更新]

我认为我的comboStore在加载时会有延迟，因此在comboStore加载之前会触发渲染器。我明白了这一点，因为如果我在chrome中调试并等待几秒钟，它就会工作。。。但不知道如何强制等待comboStore加载

关于如何解决这个问题有什么线索吗？感谢您的帮助。

以下是一些解决方案：

确保在网格存储之前加载组合存储。这可以通过首先加载组合并从其存储的load事件触发网格存储加载来完成。缺点是它增加了不必要的延迟，因此这种方法损害了用户体验

在一个请求中加载所有需要的存储。它需要一点编码，但可以节省服务器往返时间，因此这是一种非常有价值的方法。Store loadData方法用于使用接收到的数据实际加载Store。当然，您可以先在combo上调用它，然后在网格上调用它

我几乎完全使用的最佳方法是将整个过程颠倒过来，将显示字段链接到存储，而不是值字段。服务器必须返回网格存储中的显示字段和值字段，并且需要一段代码，在编辑完成后更新网格存储中的两个字段。此方法在此处演示：