首页 > 代码库 > [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏

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

2024-07-06 14:18:46   225人阅读

前言

Load Mask(遮罩)效果，就是在页面还没有完全显示出来之前， 加上一个转装转的效果。

类似：

添加这样的效果有两个好处：

1. 在页面没完全show出来之前， 把后面的页面给遮罩起来， 防止进行一些非法的操作。

2. 如果页面show出来的时间比较长的话， 可以暂时吸引用户的注意力(也就是提高 User Experience).

在Extjs 中， Ext js 的使用方式有多种。

你有可能会发现为什么有的状况下load mask 不出现？  且听下面一一道来。。。


JsonStore 加载时会自动加上Load Mask

注意， 如果读的不是服务端数据，而是本地数据的话， 是不会加mask的(本地数据比较快，的确是没有必要加)。

类似这样来定义store:

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

<!--
 Author : oscar999
 Date : 
 ALL RIGHTS RESERVED
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src=http://www.mamicode.com/"../ext-all-debug.js"></script>>
grid-data.jsp
<%
response.setContentType( "application/x-www-form-urlencoded;charset=UTF-8" );
String data = http://www.mamicode.com/"";>
这里为了延长服务端时间， 使用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   - 取得数据的文件(和上面完全一样)

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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src=http://www.mamicode.com/"../ext-all-debug.js"></script>>

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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<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>


</head>
<body>
<div id="grid-div"></div>
</body>
</html>

说明几点：
1. pop window  设置modal=true, 就会出现遮罩效果。 后面的页面被遮罩了。
2. 以上的代码会发现pop window 中的grid 没有load mask 的效果。

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

load Mask show在pop window  的下面了。不难想到 zindex 这个东西了。


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 页面如下：
<!--
 Author : oscar999
 Date : 
 ALL RIGHTS RESERVED
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<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>


</head>
<body>
<div id="grid-div"></div>
</body>
</html>
解法思路就是： 提前建立一个loadMask , 在store load 完成后隐藏起来。

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

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


联系
我们