Question

我有一个网格，并希望使用组合框作为网格单元格编辑器。编辑器组合框的值应该取决于我的数据记录中的多个字段，所以我试图在网格的beforeEdit监听器中设置组合框的值，如下所示：

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

我的组合框是这样定义的，因此它包含我的beforeEdit处理程序中显示的每个可能选项：

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

我的问题是，虽然在下拉列表中选择了正确的条目，但组合框的文本部分仍为空。

enter image description here

如何说服编辑器组合框也显示组合的文本框部分中的值？

这里有一个带有便笺簿的sencha小提琴：https://fiddle.sencha.com/#fiddle/9vd

Answer 1

您应该能够通过在编辑器组合框组件like so上使用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();
}

Answer 2

您可以在列上设置renderer以显示您想要的值:(此处为 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";
        }
    }
}

Answer 3

您需要为第二列添加 dataIndex：＆＃39; calculated_active＆＃39;

如何在ExtJS网格编辑器中正确设置组合框值？

3 个答案: