Why doesn't my ExtJS combo box select the first entry?

Question

I cannot believe how frustrating this is.

I have a combo box that I define and use in several places. I am using ExtJS 5.0.1

It has a simple in-memory store.

All I want to do is get it to automatically select the first record upon creation.

Here it is:

Ext.define('MYAPP.view.simplestatus.SimpleStatusCombo', {
    extend: 'Ext.form.field.ComboBox',
    xtype: 'simple-status-combo',

    autoSelect: true,
    editable: false,
    fieldLabel: 'Status',
    queryMode: 'local',
    store: [ ['ACTIVE', 'Active'], ['COMPLETE', 'Complete'], ['CANCELLED', 'Cancelled'] ],
    width: 160,

    initComponent: function () {
        this.labelWidth = 60;

        this.setRawValue('ACTIVE');   //  DOES NOT WORK
        this.callParent(arguments);
    }
});

That does not work. It will work if I put a slight delay in the initComponent which is grounds for termination as far as I'm concerned. Calling 'setValue" also does not work.

Ext.define('MYAPP.view.simplestatus.SimpleStatusCombo', {
    extend: 'Ext.form.field.ComboBox',
    xtype: 'simple-status-combo',

    autoSelect: true,
    editable: false,
    fieldLabel: 'Status',
    queryMode: 'local',
    store: [ ['ACTIVE', 'Active'], ['COMPLETE', 'Complete'], ['CANCELLED', 'Cancelled'] ],
    width: 160,

    initComponent: function () {
        var self = this;
        this.labelWidth = 60;

        // THIS WORKS but is UGLY and STUPID
        setTimeout(function() {
            self.setRawValue('ACTIVE');
        }, 250);

        this.callParent(arguments);
    }
});

What am I missing here?

Thanks

Answer 1

Ext.define('MYAPP.view.simplestatus.SimpleStatusCombo', {
    extend: 'Ext.form.field.ComboBox',
    xtype: 'simple-status-combo',
    autoSelect: true,
    editable: false,
    fieldLabel: 'Status',
    displayField: 'value',
    valueField: 'id',
    store: Ext.create(
            'Ext.data.Store', {
                fields: ['id', 'value'],
                data: [
                    {"id": "ACTIVE", "value": "Active"},
                    {"id": "COMPLETE", "value": "Complete"},
                    {"id": "CANCELLED", "value": "Cancelled"}
                ]
            }
    ),
    width: 160,
    value: 'ACTIVE'
});

Answer 2

Instead of setting the value on initComponent try setting it on afterRender

Ext.define('MYAPP.view.simplestatus.SimpleStatusCombo', {
        extend: 'Ext.form.field.ComboBox',
        xtype: 'simple-status-combo',

        autoSelect: true,
        editable: false,
        fieldLabel: 'Status',
        queryMode: 'local',
        store: [
            ['ACTIVE', 'Active'],
            ['COMPLETE', 'Complete'],
            ['CANCELLED', 'Cancelled']
        ],
        width: 160,

        initComponent: function() {
            this.labelWidth = 60;
            this.callParent(arguments);
        },
        afterRender: function(){
            this.setRawValue('ACTIVE');
        }
    });

Answer 3

Call this.callParent() before setting the raw value.

initComponent: function () {
    this.labelWidth = 60;

    this.callParent(arguments);
    this.setRawValue('ACTIVE');
}

Answer 4

I finally solved it.

I was able to hook into the boxready event and it worked.

I believe the other methods didn't work because as the outer containers were being created and activated, the combo wasn't ready at that instance. Which is why putting a timer on it worked. It allowed things to "settle" down.

But, the boxready event is only called once so I hope it won't affect other usages of this combo. We shall see.

Anyway, the working code:

Ext.define('MyAPP.view.simplestatus.SimpleStatusCombo', {
    extend: 'Ext.form.field.ComboBox',
    xtype: 'simple-status-combo',

    autoSelect: true,
    displayField: 'value',
    editable: false,
    fieldLabel: 'Status',
    queryMode: 'local',
    store: [
        ['ACTIVE', 'Active'],
        ['COMPLETE', 'Complete'],
        ['CANCELLED', 'Cancelled']
    ],
    valueField: 'id',
    width: 160,

    initComponent: function () {
        var self = this;
        this.labelWidth = 60;

        self.on('boxready', function (me, width, height, eOpts) {
            me.setRawValue('ACTIVE');
        });

        this.callParent(arguments);
    }
});