Extjs 网格单元中带有远程存储的组合框

获取组合框的“displayField”（组名）并将其显示在网格单元中的正确方法是什么？我用“cellediting”插件创建了一个网格，在其中一列中添加了combobox。然后创建侦听器“onCellEditingEdit”以提交“valueField”（组id）而不是“displayField”（组名称）。但我想在编辑前后在网格中显示“组名”。 我想需要为列渲染器加载组合框存储，但我不知道该怎么做

MainView:

Ext.define('Users.view.MainView', {
        extend: 'Ext.container.Viewport',
        alias: 'widget.mainview',

        requires: [
            'Users.view.MainViewViewModel',
            'Ext.grid.Panel',
            'Ext.grid.column.Number',
            'Ext.form.field.Number',
            'Ext.form.field.ComboBox',
            'Ext.grid.column.Check',
            'Ext.form.field.Checkbox',
            'Ext.grid.plugin.CellEditing'
        ],

        viewModel: {
            type: 'mainview'
        },
        layout: 'border',
        defaultListenerScope: true,

        items: [
            {
                xtype: 'gridpanel',
                region: 'center',
                store: 'workers',
                columns: [
                    {
                        xtype: 'numbercolumn',
                        dataIndex: 'id',
                        text: 'ID',
                        flex: 1,
                        format: '0',
                        editor: {
                            xtype: 'numberfield',
                            decimalPrecision: 0
                        }
                    },
                    {
                        xtype: 'gridcolumn',
                        renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {

                        // HOW to load remote store "groups" and find 'name' field by ID ('value')

                        },
                        dataIndex: 'group',
                        editor: {
                            xtype: 'combobox',
                            allowBlank: false,
                            editable: false,
                            displayField: 'name',
                            forceSelection: true,
                            queryMode: 'local',
                            store: 'groups',
                            valueField: 'id'
                        }
                    }

                ],
                plugins: [
                    {
                        ptype: 'cellediting',
                        listeners: {
                            edit: 'onCellEditingEdit'
                        }
                    }
                ]
            }
        ],

        onCellEditingEdit: function(editor, context, eOpts) {

            var combo = context.grid.columns[1].getEditor(context.record);
            var groupRecord = combo.findRecord('name', combo.getValue());
            context.record.set('group', groupRecord.get('id'));
        }

    });

组合框商店模式

Ext.define('Users.model.Groups', {
    extend: 'Ext.data.Model',
    alias: 'model.groups',

    requires: [
        'Ext.data.field.Integer',
        'Ext.data.field.String'
    ],

    fields: [
        {
            type: 'int',
            name: 'id'
        },
        {
            type: 'string',
            name: 'name'
        }
    ]
});

Ext.define('ORPO_workers.model.Workers', {
    extend: 'Ext.data.Model',
    alias: 'model.workers',

    requires: [
        'Ext.data.field.Integer',
        'Ext.data.field.String',
        'Ext.data.field.Boolean'
    ],

    fields: [
        {
            type: 'int',
            name: 'id'
        },
        {
            type: 'int',
            name: 'group'
        }
        ]
});

网格存储模型

Ext.define('Users.model.Groups', {
    extend: 'Ext.data.Model',
    alias: 'model.groups',

    requires: [
        'Ext.data.field.Integer',
        'Ext.data.field.String'
    ],

    fields: [
        {
            type: 'int',
            name: 'id'
        },
        {
            type: 'string',
            name: 'name'
        }
    ]
});

Ext.define('ORPO_workers.model.Workers', {
    extend: 'Ext.data.Model',
    alias: 'model.workers',

    requires: [
        'Ext.data.field.Integer',
        'Ext.data.field.String',
        'Ext.data.field.Boolean'
    ],

    fields: [
        {
            type: 'int',
            name: 'id'
        },
        {
            type: 'int',
            name: 'group'
        }
        ]
});

---

是的，这可能会变得棘手。如果你使用上述方法，你不可避免地会遇到鸡和蛋的问题。组合存储必须在网格渲染之前加载，渲染器才能工作。这是可以解决的，在尝试网格渲染之前，您只需要在应用程序启动时加载组合，或者加载其他组合

---

但是，还有其他不需要自定义渲染器的方法。我的首选方法是在主网格加载中为组合提供值和文本。有关所有配置详细信息，请参阅

实现渲染器并返回名称不是更简单吗？ 类似于-

renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    index = myStore.findExact('name', value);
    if (index != -1)
       return myStore.getAt(index).data.name;
}

---

如果可以确保组合存储已完全加载，那么这是最简单的方法。当组合分页时，问题就开始了，这样它就永远无法完全加载。