CODEWITHSUNDEEP
extjs
John Walker
John Walker

Reputation: 1121

how to set loading mask to whole web page, not the grid panel only

enter image description here

I have a tab panel, while loading the grid panel, user able to switch then tabs and toolbar menu. Any idea to let user disable whole page website, after the tab content loaded. User only able to access other components.

This is how I set the grid panel when loading the data store:

grid.setLoading(true);

While page loaded grid, grid only appear loading mask, how to set while tab's page are loading then set a mask. Not when page loaded the grid only start the mask and wait the data store get the data.

vehicle manage is my default tab page.
What I mean is when the user key in the url like http://mywebsite.com then having a mask, wait until the vehicle manage page are loaded all, then unmask the whole page. when user click driver manager, then mask the whole page again, wait until all page are loaded only unmask it. How to do it?

Upvotes: 2

Views: 10550

Answers (3)

Dev
Dev

Reputation: 3932

You can mask whole page using Ext.getBody()

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

When everything is loaded just hide the mask : 

myMask.hide();

Upvotes: 5

Vlad
Vlad

Reputation: 3645

grid.up('viewport').setLoading(true);

or:

grid.up('tabpanel').setLoading(true);

Upvotes: 0

lmno
lmno

Reputation: 1044

I believe you can use an Ext.LoadMask

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

After you have finished, you can remove it with

myMask.hide();

Take a look here for more info. http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.LoadMask

Upvotes: 0

Related Questions