[Ext JS 4] Load mask (load mask) display and hide

Preface

The Load mask effect is the effect of adding a transpose before the page is fully displayed.

Similar:

There are two benefits to adding such an effect:

1. Before the page is not fully show out, the back of the page to cover up, to prevent some illegal operation.

2. If the page show time is longer, you can temporarily attract the user's attention (that is, to improve users Experience).

In ExtJS, there are many ways to use Ext JS.

You may find out why the load mask does not appear in some situations? And listen to the following one by one-way ...

Load Mask is automatically added when Jsonstore is loaded

Note that if you do not read the server data, but local data, it is not added mask (local data is faster, it is not necessary to add).

Like this to define the store:

Ext.create (' Ext.data.Store ', {    storeId: ' Simpsonsstore ',    fields:[' name ', ' email ', ' phone '],    data:{' Items ': [        {' name ': ' Lisa ',  ' email ': ' [email protected] ',  ' phone ': ' 555-111-1224 '  },        {' name ': ' Bart ',  "email": "[email protected]",  "phone": "555-222-1234"},        {' name ': ' Homer ', "email": "[email Protected] ",  " phone ":" 555-222-1244 "  },        {' name ': ' Marge '," email ":" [email protected] "," Phone ":" 555-222-1254 "  }    ]},    proxy: {        type: ' Memory ',        reader: {            type: ' json ',            root: ' Items '}}    );

Next, we give an example of the server reading the data. The JSP is used here.

A grid is displayed, the store reads from the server side, and there are two files tested:

Grid.html--Define the file for the grid

grid-data.jsp-File to obtain data

Grid.html

<!--author:oscar999 Date:all rights reserved--><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
grid-data.jsp
<%response.setcontenttype ("Application/x-www-form-urlencoded;charset=utf-8"); String data = "";d ata = "{' users ': [{' Name ': ' Lisa ', ' email ': ' [email protected] ',  ' phone ': ' 555-111-1224 '}]}"; for (int i=0;i<10;i++) {thread.currentthread (). Sleep (1000);} Out.write (data); Out.flush ();%>

In order to prolong the service time, the thread is used to stay for 10 seconds.
The effect of presentation is the mapping condition of the preface part

The grid in the pop Window's page cannot display mask
The scenario is described as follows:
1. Homepage is a page with two tab pages
2. In one of the tab pages, there is a button that pops up a dialog and displays a similar grid in the pop-up dialog.

What happens is that the grid that pops up the page doesn't have a mask effect.
main.html--A page that defines two tab pages
popgrid.html--Popup grid page
grid-data.jsp-The file that gets the data (exactly as above)

Main.html
<!--author:oscar999 Date:all rights reserved--><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >

Popgrid.html
<!--author:oscar999 Date:all rights reserved--><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Explain the points:
1. When the pop window is set modal=true, a matte effect appears. The subsequent pages are masked.
2. The above code will find that the grid in pop window does not have the effect of load mask.

What is the reason for this situation?
Drag the pop-up window to the location and you'll find it carefully:
Loadmask has come out, just the level of show is not right. Look at the picture

Load Mask Show is below pop window. It's not hard to think of zindex this thing.


Debug look at the Z-index value of mask, less than the value of Z-index pop window, no wonder the display does not come out.
Naturally, the idea is, can you set the value of the zindex of the load mask? Indeed Ext.loadmask have setzindex this method.
But 1. The method of Setzindex is private 2. Z-index is dynamically calculated, setting how much bad control.

Ext JS provides a way to customize the load mask, so you might want to add a load mask to the grid.
Modify the above pop_grid.html page as follows:
<!--author:oscar999 Date:all rights reserved--><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
The solution is to set up a loadmask in advance and hide it after the store load is complete.

other
1. ExtJS's loadmask can customize the load mask style you need
You can set the type of load and the style of the graph by configuring the CLS, Maskcls Class.
var mymask = new Ext.loadmask (Mypanel, {msg: "Please wait ..."}); Mymask.show ();

2. In the Ext.componentloader component such as tab page, configure loader ), can be configured by LoadmaskConfiguration to set whether the load mask is displayed and what kind of loadmask (can be configured as Boolean and object type values)