How to properly set combobox value in ExtJS grid editor?

4
votes

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:

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:

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.

enter image description here

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

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

3
extjs

3 Answers

5
votes

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

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();
}
4
votes

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";
        }
    }
}
0
votes

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