如何正确设置ExtJS网格编辑器中的combobox值?

I have a grid and want to use a combobox as a grid cell editor. The value of the editor combobox should depend on multiple fields in my data record, so I am trying to set the value of the combobox in the grid's beforeEdit listener, like so:

我有一个网格，想要使用combobox作为网格单元编辑器。编辑器combobox的值应该依赖于我的数据记录中的多个字段，所以我尝试在网格的beforeEdit监听器中设置combobox的值，比如:

beforeEdit: function (editor, e, options) {
    var field = e.field;
    var combo = e.grid.columns[e.colIdx].getEditor(e.record);
    var force = e.record.get('forced'); 
    switch (force) {
        case 'Y':
            combo.setValue("Force active");
            break;
        case 'N':
            combo.setValue("Force inactive");
            break;
        default:
            combo.setValue("Default");
            break;                            
    }
}

My combobox is defined like so, so it contains each of the possible options shown in my beforeEdit handler:

我的combobox是这样定义的，所以它包含了我以前编辑处理程序中显示的每个可能选项:

editor: {
    xtype: 'combobox',
    forceSelection: true,
    editable: false,
    triggerAction: 'all',
    allowBlank: false,   
    store: [ 'Default', 'Force active', 'Force inactive' ]
}

My problem is that though the correct entry is selected in the dropdown, the text portion of the combobox remains empty.

我的问题是，虽然在下拉菜单中选择了正确的条目，但是combobox的文本部分仍然是空的。

How can I convince the editor combobox to also display the value in the textbox portion of the combo?

如何让编辑器combobox在组合的文本框中显示值?

Here's a sencha fiddle with a scratchpad for this: https://fiddle.sencha.com/#fiddle/9vd

这里有一个sencha小提琴，它有一个这样的便签:https://fiddle.sencha.com/#fiddle/9vd。

3 个解决方案

#1

You should be able to accomplish what you're looking to do by using the emptyText config on the editor combobox component, like so:

您应该能够使用编辑器combobox组件上的emptyText配置完成您想要做的事情:

beforeEdit: function (editor, e, options) {
    var field = e.field;
    var combo = e.grid.columns[e.colIdx].getEditor(e.record);
    var force = e.record.get('forced'); 
    switch (force) {
        case 'Y':
            combo.setValue("Force active");
            break;
        case 'N':
            combo.setValue("Force inactive");
            break;
        default:
            combo.setValue("Default");
            break;                           
    }
    combo.emptyText = combo.getValue();
}

#2

You can set a renderer on the column to display that value you'd like: (and here is a fiddle)

您可以在列上设置一个渲染器来显示您想要的值:(这里是一个小提琴)

{
                    text: 'Active?',
                    dataIndex: 'calculated_active',
                    editor: {
                        xtype: 'combobox',
                        forceSelection: true,
                        editable: false,
                        triggerAction: 'all',
                        allowBlank: false, 
                        valueField:'value',
                        displayField:'descr',
                        store: Ext.create('Ext.data.Store',{
                            fields:['descr','value'],
                            data:[{
                                descr:'Default',
                                value:''
                            },{
                                descr:'Force active',
                                value:'Y'
                            },{
                                descr:'Force inactive',
                                value:'N'
                            }]
                        })
                    },
                    flex: 1,
                    renderer:function(value,metaData,record){
                        switch(value){
                            case 'Y':
                            return "Force active";
                        case 'N':
                            return "Force inactive";
                        default:
                            return "Default";
                        }
                    }
                }

#3

you need to add dataIndex: 'calculated_active', for the second column

您需要添加dataIndex:“calculated_active”，用于第二列。