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

时间：2014-06-05 07:56:00 阅读：490 评论：0 收藏：0 [点我收藏+]

标签：des c style class blog code

前言

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

类似：

bubuko.com,布布扣

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

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="../ext-all-debug.js"></script>
<link href="../ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" />
<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>

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 - 取得数据的文件(和上面完全一样)

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="../ext-all-debug.js"></script>
<link href="../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‘
	        }
	    }]
	});
	                         			
});

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>
</head>
<body>
<div id="my-div"></div>
</body>
</html>

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, 就会出现遮罩效果。后面的页面被遮罩了。

bubuko.com,布布扣

2. 以上的代码会发现pop window 中的grid 没有load mask 的效果。

出现这种状况的原因是什么？

把弹出的窗口拖动一下位置，细心一点就会发现：

loadMask 已经出来了，只是show 的层次不对。看图

bubuko.com,布布扣

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

bubuko.com,布布扣

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 类型的值)

[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏,布布扣,bubuko.com

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

标签：des c style class blog code

原文地址：http://blog.csdn.net/oscar999/article/details/27176791

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行