PDA

View Full Version : Problem with a never ending loading mask



i_love_gillou
9 Jan 2012, 12:23 PM
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
9 Jan 2012, 1:00 PM
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
10 Jan 2012, 4:34 AM
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
10 Jan 2012, 10:49 AM
I changed from 4.0.7 to to 4.1.0 and the problem is gone.
Thank you!

marc.fearby
21 Feb 2012, 3:09 PM
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
21 Feb 2012, 3:56 PM
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
21 Feb 2012, 4:45 PM
@marc.fearby

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