extjs combo won't stop loading 4.07

Question

I have 3 combo box's. When you click the first box the second box needs to update showing the relevant data. I select the first combo the second box updates perfectly. However if i try the same steps again the second box doesn't stop loading ( see image )

Here is the code from my view

{
    xtype: 'combobox',
    name: 'Clients',
    id: 'clients',
    displayField: 'Name',
    store: 'Clients',
    queryMode: 'local',
    mode: 'local',
    valueField: 'Id',
    fieldLabel: 'Clients'
},{
    xtype: 'combobox',
    name: 'Projects',
    id: 'projects',
    displayField: 'Name',
    editable: false, 
    store: 'Projects',
    queryMode: 'local',
    mode: 'local',
    valueField: 'Id',
    fieldLabel: 'Projects'
}

and from my controller

stores: ['Projects', 'Clients', 'Jobs'],

init: function () {
    this.control({
        '#clients': {
            change: this.onClientSelect
        },
        'processlist button[action=copy]': {
            click: this.onCopyPart
        },
        '#processColourContainer #processColourGrid': {
            edit: this.onPurchaseOrderColourUpdate
        }
    });
},

onLaunch: function () {             
    var clients = this.getClientsStore();
    clients.load();             
},
onClientSelect: function (selModel, selection) {

    var projects = this.getProjectsStore();
    projects.load({
        url: '/Projects/Read/?clientId=' + selection,
        scope: this
    });    
},

Answer 1

Known bug:

http://www.sencha.com/forum/showthread.php?153490-Combo-Box-Store-Loading

Adding this should sort it out:

store.on('load', function (store, records, successful, options) {
    if (successful && Ext.typeOf(combo.getPicker().loadMask) !== "boolean") {
        combo.getPicker().loadMask.hide();
    }
});

Answer 2

I had the same symptom with a local data store with ExtJS Combobox, but the correct fix was to set queryMode properly in the combo box - there's no bug in the store (at least in 4.1 version of ExtJS). queryMode must be set to "local" instead of its default "remote" value, if your data is stored locally within the data store (as in my working example below).

ComboBox:

xtype: 'combobox',
name: 'sizeMaxUnits',
value: 'TB',
editable: false,
displayField: 'abbr',
**queryMode: 'local',**
store: 'UnitsStore',
valueField: 'units'

Store:

Ext.define('DiskApp.store.UnitsStore', {
extend: 'Ext.data.Store',

requires: [
    'DiskApp.model.UnitsModel'
],

constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        autoLoad: false,
        model: 'DiskApp.model.UnitsModel',
        storeId: 'MyStore',
        data: [
            {
                abbr: 'MB',
                units: 'M'
            },
            {
                abbr: 'GB',
                units: 'G'
            },
            {
                abbr: 'TB',
                units: 'T'
            }
        ]
    }, cfg)]);
}

});

Answer 3

I found that hooking into the 'expand' event on the combo worked better (hooking into 'load' on the store somehow destroyed the binding of the combo to the store, causing all sorts of horrible, hard to track down errors).

combo.on('expand', function (field, options) {
    if (Ext.typeOf(field.getPicker().loadMask) !== "boolean") {
        field.getPicker().loadMask.hide();
    }
}, this);

This did the job for me without breaking my application.

Answer 4

A really simple solution is to add the listConfig config to your combo box:

{
    xtype:'combobox',
    fieldLabel: 'My Combo',
    listConfig: { loadingText: null, loadMask: false },
}