Results 1 to 5 of 5

Thread: Activity spinner during loading?

  1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    11
    Vote Rating
    0
      0  

    Default Answered: Activity spinner during loading?

    Is there a way, while the app actually is displaying the Default loading png in the background, for an app to also show the activity spinner while that is happening, so there's at least something happening beyond a static screen? (Yes, another newbie question.)

  2. I had no luck with the suggestion above or the docs for that matter. The above will only create a blank mask over the screen but will not show a spinner. I was able to show a mask and a spinner every time I make an ajax call by adding this to my app.js launch function:

    Code:
    	launch: function() {
    		Ext.Viewport.add({
    			xtype: 'loadmask',
    			id: 'ajaxMask',
    			message: 'Loading...',
    			indicator: true,
    			hidden: true,
    		});
    
    
    		Ext.Ajax.on('beforerequest', function() { Ext.getCmp('ajaxMask').show(); }, this); 
    		Ext.Ajax.on('requestcomplete', function() { Ext.getCmp('ajaxMask').hide(); }, this); 
    		Ext.Ajax.on('requestexception', function() { Ext.getCmp('ajaxMask').hide(); }, this);
            }
    You could repurpose this code to show the mask and spinner whenever you like using the Ext.getCmp('ajaxMask').show(); and Ext.getCmp('ajaxMask').hide();

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    49
    Answers
    6
    Vote Rating
    0
      0  

    Default

    add a
    PHP Code:
    masked: {
    xtype"loadmask"

    in your component's config, show/hide via setMasked(true/false)

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    28
    Answers
    1
    Vote Rating
    2
      1  

    Default

    I had no luck with the suggestion above or the docs for that matter. The above will only create a blank mask over the screen but will not show a spinner. I was able to show a mask and a spinner every time I make an ajax call by adding this to my app.js launch function:

    Code:
    	launch: function() {
    		Ext.Viewport.add({
    			xtype: 'loadmask',
    			id: 'ajaxMask',
    			message: 'Loading...',
    			indicator: true,
    			hidden: true,
    		});
    
    
    		Ext.Ajax.on('beforerequest', function() { Ext.getCmp('ajaxMask').show(); }, this); 
    		Ext.Ajax.on('requestcomplete', function() { Ext.getCmp('ajaxMask').hide(); }, this); 
    		Ext.Ajax.on('requestexception', function() { Ext.getCmp('ajaxMask').hide(); }, this);
            }
    You could repurpose this code to show the mask and spinner whenever you like using the Ext.getCmp('ajaxMask').show(); and Ext.getCmp('ajaxMask').hide();

  5. #4
    Sencha User
    Join Date
    May 2012
    Posts
    13
    Vote Rating
    0
      0  

    Default

    Just to add that the solution provided in this thread worked very well, thank you!

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Location
    Illinois
    Posts
    97
    Vote Rating
    2
      0  

    Default

    Ext.getCmp('ajaxMask').show() only shows the loadmask after the data is processed. The show event fires for the loadmask but it doesn't actually display...any ideas?

    I posted this as another question with example/picture here: http://www.sencha.com/forum/showthre...297#post846297

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
  •