Combobox in grid cell with remote store

Question

what is correct method to get 'displayField' (group name) of combobox and display it in grid cell? I created a grid with 'cellediting' plugin, added combobox to one of this columns. Than created listener 'onCellEditingEdit' to submit the 'valueField' (group id) instead of 'displayField' (group name). But i want to displaying the "group name" in grid before and after edit. I guess need to load combobox store for column renderer, but i dont know how it to do.

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

    });

combobox store model

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

grid store model

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

Yes, this might get tricky. If you use the above method you inevitably hit chicken-and-egg problem. Combo store must be loaded before the grid renders for the renderer to work. It is solvable, you just need to load the combo, and perhaps other combos, at the application start before an attempt to grid render.

However, there are other methods that do not require a custom renderer. My preferred is to deliver both value and text for the combo in the main grid load. See this example for all configuration details.

Answer 2

Wouldn't it be simpler to implement a renderer and return the name? Something like -

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