[Ext JS 4] Load Mask (Load Mask) display and hiding

Preface

Load Mask (Mask) effect, that is, before the page is fully displayed, add a transfer effect.

For example:

Adding such an effect has two advantages:

1. mask the following pages before they are fully displayed to prevent illegal operations.

2. If the page show takes a long time, it will temporarily attract the user's attention (that is, improveUser Experience).

In Extjs, there are many ways to use Ext js.

You may find out why load mask does not appear in some situations? Let's hear the following...

The Load Mask is automatically added during JsonStore loading.

Note: if the data is not read from the server, but from the local data, it will not be added to the mask (local data is faster, but it is not necessary to add it ).

Define the store as follows:

Ext.create('Ext.data.Store', {    storeId:'simpsonsStore',    fields:['name', 'email', 'phone'],    data:{'items':[        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }    ]},    proxy: {        type: 'memory',        reader: {            type: 'json',            root: 'items'        }    }});

Next, we will provide an example for the server to read data. Jsp is used here.

A Grid is displayed, and the store reads data from the server. The test files include:

Grid.html -- defines the grid File

Grid-data.jsp-document for getting data

Grid.html

 
 Insert title here<script type="text/javascript" src="../ext-all-debug.js"></script>
 <script>Ext.onReady(function(){var store = new Ext.data.JsonStore({    storeId: 'simpsonsStore',    proxy: {        type: 'ajax',        url: 'grid-data.jsp',        reader: {            type: 'json',            root: 'users',            idProperty: 'name'        }    },    fields:['name', 'email', 'phone'],});Ext.create('Ext.grid.Panel', {    title: 'Simpsons',    store: Ext.data.StoreManager.lookup('simpsonsStore'),    columns: [        { text: 'Name',  dataIndex: 'name' },        { text: 'Email', dataIndex: 'email', flex: 1 },        { text: 'Phone', dataIndex: 'phone' }    ],    height: 200,    width: 400,    renderTo: 'grid-div'});store.load();});</script>

Grid-data.jsp

<%response.setContentType( "application/x-www-form-urlencoded;charset=UTF-8" );String data = "";data = "{'users':[{'name': 'Lisa', 'email':'lisa@simpsons.com',  '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 server time, the Thread method is used for 10 seconds.

The rendering effect is the texture of the preface.

The Grid in the pop Window page cannot display the mask.

The scenario is described as follows:

1. The home page is a page with two tabs

2. There is a button in one of the tabs. After you click it, a dialog is displayed, and a grid similar to the above is displayed in the pop-up dialog.

The problem is that the grid on the pop-up page does not have the mask effect.

Main.html -- define two tab pages

PopGrid.html -- the pop-up grid page

Grid-data.jsp-file for getting data (exactly the same as above)

Main.html

 
 Insert title here<script type="text/javascript" src="../ext-all-debug.js"></script>
 <script>Ext.onReady(function(){Ext.create('Ext.tab.Panel', {    width: 400,    height: 400,    renderTo: document.body,    items: [{        title: 'Foo',        items:[{        xtype:'button',         text: 'Pop Grid',        handler:function(){        showPopGridWindow();        }        }]    }, {        title: 'Bar',        tabConfig: {            title: 'Custom Title',            tooltip: 'A button tooltip'        }    }]});                         });function showPopGridWindow(){Ext.create('Ext.window.Window',{title:'Grid Window',height:400,width:400,    constrain:true,    modal: true,        loader: {            url: 'grid.html',            contentType: 'html',            autoLoad: true            ,scripts: true                   }}).show();}</script>

PopGrid.html

 
 Insert title here<script>Ext.onReady(function(){var store = new Ext.data.JsonStore({    storeId: 'simpsonsStore',    proxy: {        type: 'ajax',        url: 'grid-data.jsp',        reader: {            type: 'json',            root: 'users',            idProperty: 'name'        }    },    fields:['name', 'email', 'phone'],});Ext.create('Ext.grid.Panel', {    title: 'Simpsons',    store: Ext.data.StoreManager.lookup('simpsonsStore'),    columns: [        { text: 'Name',  dataIndex: 'name' },        { text: 'Email', dataIndex: 'email', flex: 1 },        { text: 'Phone', dataIndex: 'phone' }    ],    height: 200,    width: 400,    renderTo: 'grid-div'});store.load();});</script>

Notes:

1. Set modal = true in pop window to show the mask effect. The following page is masked.

2. The above code will find that the grid in the pop window does not have the load mask effect.

What is the cause of this situation?

Drag the position of the pop-up window and you will find out with caution:

LoadMask has come out, but the show hierarchy is incorrect. View chart

Load Mask show is under the pop window. It's not hard to think about zindex.

Debug: Check the z-index value of the mask, which is smaller than the z-index value of the pop window. No wonder it cannot be displayed.

Naturally, is it possible to set the zindex value of load mask? Indeed Ext. LoadMask has the setZindex method.

But 1. The setZindex method is private. 2. z-index is calculated dynamically, and the number of settings is difficult to control.

Ext js provides a custom load Mask method. You may wish to add your own load mask to grid ,.

Modify the ingress's pop_grid.html page as follows:

 
 Insert title here<script>Ext.onReady(function(){var store = new Ext.data.JsonStore({    storeId: 'simpsonsStore',    proxy: {        type: 'ajax',        url: 'grid-data.jsp',        reader: {            type: 'json',            root: 'users',            idProperty: 'name'        }    },    fields:['name', 'email', 'phone'],});Ext.create('Ext.container.Container',{ height: 200, width: 400, renderTo: 'grid-div', items:[ Ext.create('Ext.grid.Panel', {    title: 'Simpsons',    store: Ext.data.StoreManager.lookup('simpsonsStore'),    columns: [        { text: 'Name',  dataIndex: 'name' },        { text: 'Email', dataIndex: 'email', flex: 1 },        { text: 'Phone', dataIndex: 'phone' }    ],    height: 200,    width: 400,        listeners:{    afterRender:function(){    //Ext.getCmp("myGridMask").show();    }    }  })  ,{    xtype: 'loadmask',    id: 'myGridMask',    indicator: true,    target: this,    autoShow:true   } ]});store.load(function(){Ext.getCmp("myGridMask").hide();});});</script>

The solution is to create a loadMask in advance and hide it after the store load is complete.

Others

1. Extjs LoadMask can customize the load mask style you need

You can configure the cls and maskCls classes to set the load text, graph, and other styles.

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

2. in Ext. in components such as ComponentLoader (for example, configuring loader on the tab page ), you can configure the loadMask configuration to determine whether to display the load mask and what kind of loadMask is displayed (values of the boolean and Object types can be configured)