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

Question

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

主视图：

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'
        }
        ]
});

Answer 1

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

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

Answer 2

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

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