extjs 3 - Which event is fired when extjs is completely loaded

Question

I am using Extjs for my application. Which event/listener is fired when extjs completely loads the application (images and everything)?

I tried following but none of these worked:

• body or window onload (body tag is empty)
• viewport render listener

What I am doing currently: When I start the application it displays "loading" mask. Then an ajax request is fired and when it is completed, "loading" mask is removed. Following might give some idea:

Ext.onReady(function(){
    Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
    Ext.ux.mask.show();   // Show the mask

    // All components are loaded eg. viewport, tabpanel, button etc...
    ajax_request(); // Somewhere between the code ajax request is called
    // All components are loaded eg. viewport, tabpanel, button etc...

    function ajax_request() {
        // Other processing

        Ext.ux.mask.hide(); // Hide the mask
    }
});

The problem is the ajax request is taking much time now so i want to change the working something as follows:

Ext.onReady(function(){
    Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
    Ext.ux.mask.show();   // Show the mask

    // All components are loaded eg. viewport, tabpanel, button etc...
    ajax_request(); // Somewhere between the code ajax request is called
    // All components are loaded eg. viewport, tabpanel, button etc...

    function ajax_request() {
        // Other processing

        //Ext.ux.mask.hide();   // Hide the mask - removed
    }

    // I want to call this when everything is loaded on the page
    function everything_loaded() {
        Ext.ux.mask.hide(); // Hide the mask
    }

});

Any idea on this? Thanks a lot for help.

Answer 1

What ExtJs version are you referring to? 3.x or 4.x?

If 4.x, consider using/following the MVC Application Architecture guidelines. In that case, you want to override Ext.application.launch as described in MVC Application Architecture or Ext.app.Application

If 3.x, I guess Ext.onReady() is the best they have.

UPDATE

Based on your updated question, this is what you are looking for -

Ext.onReady(function(){
    Ext.Ajax.on('beforerequest', showSpinner, this);
    Ext.Ajax.on('requestcomplete', hideSpinner, this);
    Ext.Ajax.on('requestexception', hideSpinner, this);
...
}); //end of onReady

showSpinner = function(){
  //setup and show mask
}

hideSpinner = function(){
 //hide mask
}

Reference - Ext.Ajax

Answer 2

base on your update.... i got conclusion that you are using Ext version 3.x.x

When I start the application it displays "loading" mask. Then an ajax request is fired and when it is completed, "loading" mask is removed

how did you call the ajax ?? why don't you hide the mask in ajax callback ?

Ext.Ajax.request({
    url : "blabla",
    method : "GET",
    callback : function(){
        Ext.ux.mask.hide();
    }
});

or, mybe you want to try this one (this is what i used to show preload)

Answer 3

Try the afterlayout event and specify a method to execute when it's trigered

Answer 4

Thanks to amol and Warung Nasi 49. Although I couldn't find the best way, I manage to get almost expected result:

Ext.onReady(function(){
    Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
    Ext.ux.mask.show();   // Show the mask

    // All components are loaded eg. viewport, tabpanel, button etc...

    setTimeout(function(){
        Ext.ux.mask.hide(); 
    }, 2000);

});