CODEWITHSUNDEEP
extjs
user427969
user427969

Reputation: 3896

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

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:

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.

Upvotes: 3

Views: 11862

Answers (4)

user427969
user427969

Reputation: 3896

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

});

Upvotes: 0

Amol Katdare
Amol Katdare

Reputation: 6760

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

Upvotes: 3

Marouane Gazanayi
Marouane Gazanayi

Reputation: 5183

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

Upvotes: 0

Egy Mohammad Erdin
Egy Mohammad Erdin

Reputation: 3413

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)

Upvotes: 2

Related Questions