I have a panel within which I have two more panels. When you click on panel1 then information in panel2 is loaded. Since the information is quite huge there is some delay when its being loaded. During this interim period I wish to add a loading mask which intimates the user that its getting loaded.

For the same I have done this:

var myMask = new Ext.LoadMask(Ext.getCmp('eventsPanel'), {
        msg:"Please wait..."
});
myMask.show(); 
// eventsPanel is the main panel under which panel1 and panel2 lie.
// This code is in the selectionchange listener of panel1 whose code
// is inside the main eventsPanel code.

However, nothing is being displayed on the screen. Its still the same, i.e., for some amount of time the screen freezes and then after a delay of like 2-3 seconds the information is loaded. Can you please advise as to where am I going wrong?

I have a panel within which I have two more panels. When you click on panel1 then information in panel2 is loaded. Since the information is quite huge there is some delay when its being loaded. During this interim period I wish to add a loading mask which intimates the user that its getting loaded.

For the same I have done this:

var myMask = new Ext.LoadMask(Ext.getCmp('eventsPanel'), {
        msg:"Please wait..."
});
myMask.show(); 
// eventsPanel is the main panel under which panel1 and panel2 lie.
// This code is in the selectionchange listener of panel1 whose code
// is inside the main eventsPanel code.

However, nothing is being displayed on the screen. Its still the same, i.e., for some amount of time the screen freezes and then after a delay of like 2-3 seconds the information is loaded. Can you please advise as to where am I going wrong?

• javascript
• extjs
• panel
• loading
• mask

• 1 how are you loading the data, it sounds like you are synchronously loading the data (which would mean that though you show the mask, it is already hidden by the time the GUI is ready to do an update). In general javascript is single threaded, so long operations should be rewritten that they do not lock the GUI for an overly long period of time (like 2-3 seconds) – Icepickle Commented Jun 9, 2015 at 8:52
• Thanks for the insight. I have the data in a variable. I am just adding this data one by one to the store of the 2nd panel using a loop. You mentioned long operations should be rewritten so that they are not able to lock the GUI. Can you please provide some link or resource to help me understand various ways to rewrite code in such a way? In terms of efficiency there is no counter to adding the data row by row from this variable using a loop. Any other insight would be helpful – aayush_v20 Commented Jun 9, 2015 at 8:56
• it is hard to suggest without seeing the code that loads the data, if you could show the code or a reconstruction of the code, that would be very helpfull – Icepickle Commented Jun 9, 2015 at 11:48

2 Answers 2

I would suggest you to first show your masking like the way you are doing:

var myMask = new Ext.LoadMask(Ext.getCmp('eventsPanel'), {
        msg:"Please wait..."
});
myMask.show();

Then make a delayed task

var task = new Ext.util.DelayedTask(function(){
    //your loading panel2 with heavy data goes here
    myMask.hide();
});
//start the task after 500 miliseconds
task.delay(500);

This should solve your problem.

I make a custom mask as follows:

var ponentToMasK = Ext.ComponentQuery.query('#myChildComponent')[0];
var customMask = Ext.get(ponentToMasK.getEl()).mask('My mask text...');

var task = new Ext.util.DelayedTask(function() {

    customMask.fadeOut({
        duration : 500,
        remove:true
    });

});

task.delay(1000);

Normally when a event is triggered in a first ponent, caused, for example, the loading of a grid in the second ponent, the mask appears in both ponents in order to avoid user errors by clicking on the first ponent as the second ponent is loading the grid or is loading the mask.

In this case:

var ponentToMasK = Ext.ComponentQuery.query('#myParentComponent')[0]; //HBox, BBox layout, tab, etc. with the two child ponents

Hope this helps!

Edit: 10-06-2015

The 'duration:500' and the 'delay(1000)' is only to illustrate. You can adjust these values to the needs of each ponent that you apply a mask.

If you remove the mask abruptly the user can not even see loading the message, that's why I use fadeOut.

Thus, you can apply a mask on virtually any ponent such as, for example, a fieldset, when you add it fields dynamically.

task -> http://docs.sencha./extjs/5.1/5.1.0-apidocs/#!/api/Ext.util.DelayedTask

Ex.get -> http://docs.sencha./extjs/5.1/5.1.0-apidocs/#!/api/Ext-method-get

fadeOut - > http://docs.sencha./extjs/5.1/5.1.0-apidocs/#!/api/Ext.dom.Element-method-fadeOut

You can also do the following:

var task = new Ext.util.DelayedTask(function() {
   Ext.getBody().unmask();
});
task.delay(1000);

You can read more about this technique in the book: Mastering Ext JS - Second Edition (Loiane Groner)

Edit: 10-06-2015

One more detail: If we apply one mask on a Hbox layout, containing as one of the childs a grid, we have two mask: HBOX mask and grid mask. In these cases, I turn off dynamically the grid mask:

var grid =  Ext.ComponentQuery.query('#griditemId')[0];
if(grid){
     grid.getView().setLoading(false);
}

Hope this helps.