Programatically setting the selected record after rendering in ExtJS 5

Question

I am building a web application where I have 2 combo boxes that use the same store.

The user first sets combo box 1, then combo box 2 is in a floating panel that gets shown when a user clicks a certain button. What I want to happen is that when combo box 2 appears, the pre-selected record would be the one that was selected in combo box 1.

So far, I am using the afterrender event bind for the combo box 2 but nothing seems to be working:

Here is the body of my afterrender function:

console.log('after render combobox hit!');

var comboBox1 = Ext.getCmp('comboBox1');

var store = component.getStore();
var record = comboBox1.findRecordByValue(comboBox1.getValue());
var rowIndex = store.indexOf(record);

var selectedRecord = comboBox1.getStore().getAt(rowIndex);

console.log('combobox selection index = ' + rowIndex);

console.log('selected record = ' + selectedRecord.get('device_name'));

component.select(selectedRecord);

What I do is I get the record and the index selected in Combo Box 1 and then try and set that as the value in Combo Box 2. the select command didn't work. I have also tried the following:

component.select(record, true);

component.setValue(record.get('device_name'));
component.setRawValue(record.get('device_name'));

but none of those worked as well.

Has anyone else tried to programmatically set a default choice for a combobox?

josei josei · Accepted Answer · 2017-02-07T20:05:09

Try this (copy and paste on Fiddle):

            var states = Ext.create('Ext.data.Store', {
                fields: ['abbr', 'name'],
                data : [
                    {"abbr":"AL", "name":"Alabama"},
                    {"abbr":"AK", "name":"Alaska"},
                    {"abbr":"AZ", "name":"Arizona"}
                    //...
                ]
            });

            Ext.create('Ext.form.ComboBox', {
                fieldLabel: 'Combobox 1',
                itemId: 'combobox1ItemId',
                emptyText: 'Select item',
                store: states,
                queryMode: 'local',
                displayField: 'name',
                valueField: 'abbr',
                renderTo: Ext.getBody()
            });

            Ext.create('Ext.Button', {
                text: 'Click me',
                width: 120,
                margin: '10 2 10 120',
                renderTo: Ext.getBody(),
                handler: function() {

                    var combo1 = Ext.ComponentQuery.query('#combobox1ItemId')[0];
                    var combo2 = Ext.ComponentQuery.query('#combobox2ItemId')[0];
                    var combo1Value = combo1.getValue();

                    combo2.select(combo1Value)

                    var store = combo2.getStore();
                    var item = store.findRecord(combo2.displayField, combo1Value);

                    setTimeout(function () {
                        combo2.fireEvent('select', combo2, [item]);
                    }, 200);

                }
            });

            Ext.create('Ext.form.ComboBox', {
                fieldLabel: 'Combobox 2',
                itemId: 'combobox2ItemId',
                store: states,
                queryMode: 'local',
                displayField: 'name',
                valueField: 'abbr',
                renderTo: Ext.getBody()
            });

Programatically setting the selected record after rendering in ExtJS 5

1 Answers