[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏

## [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏
### 前言
Load Mask(遮罩)效果，就是在页面还没有完全显示出来之前， 加上一个转装转的效果。
类似：

添加这样的效果有两个好处：
1. 在页面没完全show出来之前， 把后面的页面给遮罩起来， 防止进行一些非法的操作。
2. 如果页面show出来的时间比较长的话， 可以暂时吸引用户的注意力(也就是提高 User Experience).
在Extjs 中， Ext js 的使用方式有多种。
你有可能会发现为什么有的状况下load mask 不出现？  且听下面一一道来。。。

### JsonStore 加载时会自动加上Load Mask
注意， 如果读的不是服务端数据，而是本地数据的话， 是不会加mask的(本地数据比较快，的确是没有必要加)。
类似这样来定义store:
```javascript
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'
	        }
	    }
	});
```

接下来，就给出一个服务端读取数据的例子。 这里使用的是jsp.
显示一个Grid , store 从服务器端读取，测试的文件有两个：
grid.html    -- 定义grid 的文件
grid-data.jsp   - 取得数据的文件

grid.html
```html
htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<scripttype="text/javascript"src="../ext-all-debug.js">script>
<linkhref="../ext-theme-neptune/ext-theme-neptune-all.css"rel="stylesheet"type="text/css" />
<script>
Ext.onReady(function(){
var store = newExt.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>
head>
<body>
<divid="grid-div">div>
body>
html>

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();
%>
```

这里为了延长服务端时间， 使用Thread 的方式停留了10秒。
呈现的效果就是前言部分的贴图状况

### 在pop Window 的页面中的Grid 无法显示mask
场景描述如下：
1. 主页面是一个有两个 tab 页的页面
2. 在其中一个tab 页中有一个button, 点击后弹出一个dialog, 在这个弹出的dialog 中显示一个上面类似的grid.

出现的状况是： 弹出页面的grid 不会有mask 的效果。
Main.html  -- 定义两个tab 页的页面
popGrid.html -- 弹出的grid 页面
grid-data.jsp   - 取得数据的文件(和上面完全一样)

```html
Main.html
htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<scripttype="text/javascript"src="../ext-all-debug.js">script>
<linkhref="../ext-theme-neptune/ext-theme-neptune-all.css"rel="stylesheet"type="text/css" />
<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'
	        }
	    }]
	});
});
functionshowPopGridWindow()
{
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>
head>
<body>
<divid="my-div">div>
body>
html>

popGrid.html
htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<script>
Ext.onReady(function(){
var store = newExt.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>
head>
<body>
<divid="grid-div">div>
body>
html>

```
说明几点：
1. pop window  设置modal=true, 就会出现遮罩效果。 后面的页面被遮罩了。
![](/upload/picture/2022-09-29/upload_21207c13a33ceb6b31540c822f06e34d.png)
2. 以上的代码会发现pop window 中的grid 没有load mask 的效果。

### 出现这种状况的原因是什么？
把弹出的窗口拖动一下位置，细心一点就会发现：
loadMask 已经出来了， 只是show 的层次不对。看图

![](/upload/picture/2022-09-29/upload_25d64e9e294a1bcfd835d2a42c04d57a.png)
load Mask show在pop window  的下面了。不难想到 zindex 这个东西了。

![](/upload/picture/2022-09-29/upload_69897a5ef100d2e16989699656387153.png)

![](/upload/picture/2022-09-29/upload_62ce0718f1e175b9f6826098cc9f25c6.png)
Debug 看一下 mask 的z-index 的值， 小于pop window的z-index 的值， 怪不得显示不出来。
自然有种想法是是否可以设置load mask 的zindex 的值呢？ 的确 Ext.LoadMask 有 setZindex 这种方法。
但是 1. setZindex 的方法是private 的 2. z-index 是动态算出来了， 设置多少不好控制。

Ext js 提供了定制load Mask 的方法， 不妨给grid 添加一个自己的load mask,.
修改上面的pop_grid.html 页面如下：
```html
htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<script>
Ext.onReady(function(){
var store = newExt.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>
head>
<body>
<divid="grid-div">div>
body>
html>
```
解法思路就是： 提前建立一个loadMask , 在store load 完成后隐藏起来。

### 其他
1. Extjs 的 LoadMask 可以定制自己需要的load mask 样式
可以通过配置  cls,  maskCls 的 Class 来设置load 的文字以及图等样式。
var myMask = newExt.LoadMask(myPanel, {msg:"Please wait..."});
myMask.show();

2. 在 Ext.ComponentLoader 这种组件中(比如tab 页中配置loader 的方式)， 可以通过配置loadMask 的配置来设置是否显示load mask 以及显示怎么样的loadMask(可以配置成boolean 型和Object 类型的值)

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏

网站导航