Results 1 to 7 of 7

Thread: Problem with a never ending loading mask

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    2
    Vote Rating
    0
      0  

    Question Answered: Problem with a never ending loading mask

    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:
    Code:
    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'
            }
    });
    Code:
    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
    Code:
    Ext.define('GIV.store.Fonctions', {
        extend: 'Ext.data.Store',
        requires: 'GIV.model.Fonction',
        model: 'GIV.model.Fonction',
    	autoLoad: true	
    });
    Code:
    Ext.define('GIV.store.Types', {
        extend: 'Ext.data.Store',
        requires: 'GIV.model.Type',
        model: 'GIV.model.Type',
    	autoLoad: false	
    });
    And then in the controller:
    Code:
    ...
    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:

    Code:
    /* 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!

  2. 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.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Answers
    3997
    Vote Rating
    1536
      0  

    Default

    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.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    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.

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    2
    Vote Rating
    0
      0  

    Default

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

  6. #5
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,353
    Answers
    13
    Vote Rating
    424
      0  

    Default

    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 :-(

  7. #6
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,353
    Answers
    13
    Vote Rating
    424
      0  

    Default

    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):

    PHP Code:
    listeners: {
        
    'load': function (storerecordssuccessoperationeOpts) {
            
    Ext.override(Ext.LoadMask, {
                
    onHide: function() {
                     
    this.callParent();
                }
            });
        }


  8. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    @marc.fearby

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •