extjs 6 combobox reload displayed value

Question

when the store is loaded after setValue() we end up with the valueField being displayed. Once the store is loaded and we click on the dropdown, the correct item is being highlighted; but input field itself is not updated with the displayField value.

how do we refresh the input element of the combobox to reflect the selected item display field?

Answer 1

Put your setValue() in the callback function of store loading. Let assume combo is combobox, your code should be like that.

combo.store.load({
    callback: function (rec) {
       combo.setValue(value);
    }
});

Answer 2

I would recommend that before using setValue() you use the clearValue() option. This removes the underlying value that the combobox had before. But, if you are setting the value of the combobox, the store has not been loaded yet, and it is a remote combobox, I would recommend that you first add the record to the combobox's store and then set the value to that record. Once the store is loaded again, the store will be cleared, but you will still have your first value.

combobox.getStore().insert(0, {
   id: 1,
   name: 'displayField'
});
combobox.setValue(1); //if your valueField is id

Docs for the methods mentioned above: https://docs.sencha.com/extjs/6.6.0/classic/Ext.form.field.ComboBox.html https://docs.sencha.com/extjs/6.6.0/classic/Ext.data.Store.html