How to properly set combobox value in ExtJS grid editor?

Question

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

Matthew Graves · Accepted Answer · 2014-11-12T21:41:11.927

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

score 4 · Answer 2 · edited Sep 07 '18 at 10:46

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

score 0 · Answer 3 · answered Sep 05 '14 at 17:18

0

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

answered Sep 05 '14 at 17:18

I3i0

1,191
2
12
25

Thanks. I agree that I was missing that config option when I created my fiddle, but it doesn't seem to change the fact that the dropdown text value is empty. I also wanted the combobox to act like an HTML select (with no free-form text entry), so I have updated my fiddle to include those configs. Now you can better see that clicking on the editable cell just shows the empty editor text. – Chris Farmer Sep 05 '14 at 17:52
forceSelection is true .. so when you click on the cell the combobox try to find the preslected value ex: 'Y' in its store witch has no value equal Y so that it shows an empty value when you click on it. So either remove forceSelection: true or include selected values in calculated_active column in the combobox's store – I3i0 Sep 05 '14 at 22:39
I don't get it. The whole point of my question is that I want to show a dropdown of values that are different from those in the dataIndexed field. That's the point of my exercise: trying to set the value of the combobox with setValue in beforeEdit. Before the edit combo is displayed. I don't want the value of that dataIndex field to be displayed in my combobox. – Chris Farmer Sep 05 '14 at 23:28

How to properly set combobox value in ExtJS grid editor?

3 Answers3