1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    11
    Vote Rating
    0
    DaveyJJ is on a distinguished road

      0  

    Default Answered: Activity spinner during loading?

    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
    Vote Rating
    0
    Answers
    6
    j.k is on a distinguished road

      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
    Vote Rating
    2
    Answers
    1
    ratmat2000 is on a distinguished road

      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
    laji.inbox is on a distinguished road

      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
    93
    Vote Rating
    2
    bwags is on a distinguished road

      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