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始终为空。奇怪的是，在我的视图中如果我单击编辑行并打开组合，则组合具有值。

[UPDATE]

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

有关如何解决此问题的任何线索？感谢任何帮助。

Answer 1

一些解决方案：

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

ExtJS网格组合渲染器无法正常工作

1 个答案: