Question

获取组合框的'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'
        }
        ]
});

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

与远程商店的网格单元格中的组合框

2 个答案: