ExtJS – Local combobox keeps loading

Had a problem with ‘local store comboboxes’ on screens that I reused in several places. I’m mentioning ‘local store’ because when using a local store the combobox doesn’t have any reason to show a loading box. Due to some strange bug the comboboxes on those screens would suddenly go into a mode where they don’t allow any mouse interaction and show a loading box all the time.

ExtJS – Combobox issue

This would happen when the screen containing the combobox was created, the value was changed, the screen was destroyed (closed) and after that the screen was reopened (created again).

I found out it was due to the way I defined the stores in the comboboxes.

Ext.define('mynamespace.something.HourSelector', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.hourselector',
    xtype: 'combobox',
    mode: 'local',
    valueField: 'value',
    store: Ext.create('Ext.data.Store', {
        fields: [
            'value',
            'text'
        ],
        data: [
            {value: 0, text: '0 hours'},
            {value: 1, text: '1 hour'},
            {value: 2, text: '2 hours'}
            // etc
        ]
    })
});

Removed some code to keep it short and easily readable. By changing this to the following, the problem disappeared.

Ext.define('mynamespace.something.HourSelector', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.hourselector',
    xtype: 'combobox',
    mode: 'local',
    valueField: 'value',
    initComponent: function(){
        this.store = Ext.create('Ext.data.Store', {
            fields: [
                'value',
                'text'
            ],
            data: [
                {value: 0, text: '0 hours'},
                {value: 1, text: '1 hour'},
                {value: 2, text: '2 hours'}
                // etc
            ]
        });
        this.callParent(arguments);
    }
});