ExtJS 网格组合渲染器显示为空

Question

我的 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);
    }

});

问题出在

renderer

函数中，因为

comboStore

始终为空。奇怪的是，在我看来，如果我单击编辑行并打开组合，则组合具有值。

更新

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

我该如何解决这个问题？

Answer 1

几个解决方案：

1. 确保组合存储在网格存储之前加载。这可以通过首先加载组合并从其存储的加载事件触发网格存储加载来完成。缺点是会增加不必要的延迟，因此会影响用户体验。
2. 在一个请求中加载所有需要的商店。它需要一些编码，但可以节省服务器往返时间，因此这是一种非常有价值的方法。 Store loadData 方法用于实际加载接收到的数据。当然，您首先会在组合上调用它，然后在网格上调用它。
3. 我几乎唯一使用的最好方法是将整个事情颠倒过来，将显示字段链接到商店，而不是值字段。服务器必须返回网格存储中的显示字段和值字段，并且需要一小段代码来在编辑完成后更新网格存储中的这两个字段。此方法在这里演示：ExtJS Grid 中的远程组合