Problem with a never ending loading mask

[i_love_gillou]

Hi all,
Extjs 4.0.7
Here is my problem: I have 2 linked combos with 2 stores bound to each, and my goal is to load the content of the second one on the select event of the first one. To do so i have configured two stores and two models:

Models:

Ext.define('GIV.model.Fonction', {
extend: 'Ext.data.Model',
fields: ['id', 'libelle_fonction'],

proxy: {
type: 'ajax',
url: 'fonction',
reader: {
type: 'json',
root: 'results',
successProperty: 'success'
}
});



Ext.define('GIV.model.Type', {
extend: 'Ext.data.Model',
fields: ['id', 'libelle_type'],

proxy: {
type: 'ajax',
url: 'type/fonction/',
reader: {
type: 'json',
root: 'results',
successProperty: 'success'
}
}
});


Stores

Ext.define('GIV.store.Fonctions', {
extend: 'Ext.data.Store',
requires: 'GIV.model.Fonction',
model: 'GIV.model.Fonction',
autoLoad: true
});


Ext.define('GIV.store.Types', {
extend: 'Ext.data.Store',
requires: 'GIV.model.Type',
model: 'GIV.model.Type',
autoLoad: false
});


And then in the controller:


...
init: function(){
this.control({
'#cbFonction': {
select: this.onSelectCbFonction
}

});
},

onSelectCbFonction: function(combo, records, elOpts){
var cbType = Ext.getCmp('cbType');
cbType.clearValue();
cbType.getStore().load({ url: 'type/fonction/' + combo.getValue() });
cbType.setLoading(false);
}


...


combos:


/* FONCTION */
var fonctionCombo = Ext.create('Ext.form.field.ComboBox', {
id: 'cbFonction',
fieldLabel: 'Fonction',
store: 'Fonctions',
queryMode: 'local',
displayField: 'libelle_fonction',
valueField: 'id',
flex: 1,
labelAlign: 'top',
editable: false
});

var typeCombo = Ext.create('Ext.form.field.ComboBox', {
id: 'cbType',
fieldLabel: 'Type',
store: 'Types',
queryMode: 'local',
displayField: 'libelle_type',
valueField: 'id',
flex: 1,
labelAlign: 'top',
editable: false
});



When an item in the combo 'cbFonction' is selected, the content of the second combo is loaded but the loading spinner never disappear (even with the setLoading is set to false)
What am i doing wrong?
Thanks!

[mitchellsimoens]

I would create a simple test case to reproduce in 4.0.7 and then try it in 4.1.0 to see if the many changes to loadmask fix this.

[skirtle]

I don't know if it applies in this case, but a lot of people have hit a bug with comboboxes and loadmasks in 4.0.7. Some threads discussing this issue are:

http://www.sencha.com/forum/showthread.php?152324
http://www.sencha.com/forum/showthread.php?156908

As Mitchell suggests, this bug has been fixed in 4.1-beta-1.

[i_love_gillou]

I changed from 4.0.7 to to 4.1.0 and the problem is gone.
Thank you!

[marc.fearby]

I'm now seeing the same problem with two linked combos. I tried the latest nightly build (ext-4.1-20120206) and the "Loading..." mask problem has gone, but some of my forms are all over the place, unfortunately.

I think the examples/demo page could do with a "related combos" example because perhaps I, and others, may be doing things in a less-than-efficient way that might be setting off the "Loading..." mask. After barking up the wrong tree with the store.filterBy() method for half a day, I'm now re-creating a store in the second combo's change event, and assigning that to the related combo with "combo.store =" and "combo.bindStore(...)" which perhaps isn't the best way? Not sure, I haven't had to do related combos before. Maybe I'll try getting the proxy and reloading a pre-set store....

But this isn't the first time the wretched "Loading..." mask has ruined my day, though :-(

[marc.fearby]

Adding a listener to my store's load event to hide the mask fixes it for now with 4.0.7 (thanks to this post (http://www.sencha.com/forum/showthread.php?181002-ExtJs-4-and-Linked-Chained-Cascading-Combobox-(remote)&p=734888&viewfull=1#post734888)):


listeners: {
'load': function (store, records, success, operation, eOpts) {
Ext.override(Ext.LoadMask, {
onHide: function() {
this.callParent();
}
});
}
}

[vietits]

@marc.fearby

You should call override() one time not each time the load event is fired.