Extjs ComboBox doesn't pick the correct value when setValue is called.

Question

I have the following code:

// Part of a larger form.
{
    xtype: 'combo',
    id: 'enroller',
    valueNotFoundText: 'not found',
    triggerAction: 'all',
    mode: 'local',
    fieldLabel: 'Enroller',
    store: new Ext.data.JsonStore({
        url: url,
        root: 'data',
        autoLoad: true,
        fields: ['enrollerID', 'name', 'key']
    }),
    displayField: 'name',
    valueField: 'key',
    hiddenName: 'enrollerID',
    forceSelection: true
}
// Other area of code.
Ext.getCmp('enroller').setValue(289);

Even though I can confirm the store has a record that looks like:

{"name":"Test Enroller","enrollerID":"289","key":"289"}

The combo box displays the valueNotFoundText. How can I get the combo to load the correct record?

Answer 1

Try Ext.getCmp('enroller').setValue("289");

In some cases in Ext they do a compare with === which will also do a compare on the object type ie. it needs to be a string vs an int.

Answer 2

Finally got it working with this code. I force the combo box to load the value only after the store has loaded its values. Before it was getting set before the store loaded its values.

{
    xtype: 'combo',
    fieldLabel: 'Enroller',
    ref: 'enroller',
    store: {
        xtype: 'jsonstore',
        url: context + '/store.do',
        baseParams: { 'class': 'scheduler.Enroller' },
        autoLoad: true,
        listeners: {
            load: function() {
                me.enroller.setValue(me.enroller.getValue());
            }
        }
    },
    displayField: 'name',
    valueField: 'enrollerID',
    hiddenName: 'enrollerID',
    triggerAction: 'all'
}