Geek asks and answers

Extjs 3 - what event is fired when extjs is fully loaded

I am using Extjs for my application. What event / listener is triggered when extjs fully loads the application (images and all)?

I tried following, but none of them worked:

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

What I am doing now: when I launch the application, it displays a download mask. Then the ajax request is launched, and when it is completed, the “boot mask” will be removed. The 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 that the ajax request is time consuming, so I want to change the work 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? Thank you very much for your help.

+3
source share
4 answers

amol Warung Nasi 49. , :

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

});
0

ExtJs ? 3.x 4.x?

4.x, / MVC Application Architecture. Ext.application.launch, MVC Application Architecture Ext.app.Application

3.x, , Ext.onReady() - , .

UPDATE

, , -


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
}

- Ext.Ajax

+3

.... , Ext 3.x.x

, . ajax , , ""

ajax?? ajax?

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)

+2
source

Try the afterlayout event and specify the method that will be executed when it scrolls

0
source

More articles:


All Articles