javascript
extjs ajax 遮罩层,[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏
前言
Load Mask(遮罩)效果，就是在頁面還沒有完全顯示出來之前， 加上一個(gè)轉(zhuǎn)裝轉(zhuǎn)的效果。
類似：
添加這樣的效果有兩個(gè)好處：
1. 在頁面沒完全show出來之前， 把后面的頁面給遮罩起來， 防止進(jìn)行一些非法的操作。
2. 如果頁面show出來的時(shí)間比較長的話， 可以暫時(shí)吸引用戶的注意力(也就是提高 User Experience).
在Extjs 中， Ext js 的使用方式有多種。
你有可能會(huì)發(fā)現(xiàn)為什么有的狀況下load mask 不出現(xiàn)？? 且聽下面一一道來。。。
JsonStore 加載時(shí)會(huì)自動(dòng)加上Load Mask
注意， 如果讀的不是服務(wù)端數(shù)據(jù)，而是本地?cái)?shù)據(jù)的話， 是不會(huì)加mask的(本地?cái)?shù)據(jù)比較快，的確是沒有必要加)。
類似這樣來定義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‘
}
}
});
接下來，就給出一個(gè)服務(wù)端讀取數(shù)據(jù)的例子。 這里使用的是jsp.
顯示一個(gè)Grid , store 從服務(wù)器端讀取，測試的文件有兩個(gè)：
grid.html??? -- 定義grid 的文件
grid-data.jsp ? - 取得數(shù)據(jù)的文件
grid.html
Insert title hereExt.onReady(function(){
var store = new Ext.data.JsonStore({
storeId: ‘simpsonsStore‘,
proxy: {
type: ‘a(chǎn)jax‘,
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();
});
grid-data.jsp
response.setContentType( "application/x-www-form-urlencoded;charset=UTF-8" );
String data = "";
data = "{‘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();
%>
這里為了延長服務(wù)端時(shí)間， 使用Thread 的方式停留了10秒。
呈現(xiàn)的效果就是前言部分的貼圖狀況
在pop Window 的頁面中的Grid 無法顯示mask
場景描述如下：
1. 主頁面是一個(gè)有兩個(gè) tab 頁的頁面
2. 在其中一個(gè)tab 頁中有一個(gè)button, 點(diǎn)擊后彈出一個(gè)dialog, 在這個(gè)彈出的dialog 中顯示一個(gè)上面類似的grid.
出現(xiàn)的狀況是： 彈出頁面的grid 不會(huì)有mask 的效果。
Main.html? -- 定義兩個(gè)tab 頁的頁面
popGrid.html -- 彈出的grid 頁面
grid-data.jsp ? - 取得數(shù)據(jù)的文件(和上面完全一樣)
Main.html
Insert title hereExt.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();
}
popGrid.html
Insert title hereExt.onReady(function(){
var store = new Ext.data.JsonStore({
storeId: ‘simpsonsStore‘,
proxy: {
type: ‘a(chǎn)jax‘,
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();
});
說明幾點(diǎn)：
1. pop window? 設(shè)置modal=true, 就會(huì)出現(xiàn)遮罩效果。 后面的頁面被遮罩了。
2. 以上的代碼會(huì)發(fā)現(xiàn)pop window 中的grid 沒有l(wèi)oad mask 的效果。
出現(xiàn)這種狀況的原因是什么？
把彈出的窗口拖動(dòng)一下位置，細(xì)心一點(diǎn)就會(huì)發(fā)現(xiàn)：
loadMask 已經(jīng)出來了， 只是show 的層次不對(duì)。看圖
load Mask show在pop window? 的下面了。不難想到 zindex 這個(gè)東西了。
Debug 看一下 mask 的z-index 的值， 小于pop window的z-index 的值， 怪不得顯示不出來。
自然有種想法是是否可以設(shè)置load mask 的zindex 的值呢？ 的確 Ext.LoadMask 有 setZindex 這種方法。
但是 1. setZindex 的方法是private 的 2. z-index 是動(dòng)態(tài)算出來了， 設(shè)置多少不好控制。
Ext js 提供了定制load Mask 的方法， 不妨給grid 添加一個(gè)自己的load mask,.
修改上面的pop_grid.html 頁面如下：
Insert title hereExt.onReady(function(){
var store = new Ext.data.JsonStore({
storeId: ‘simpsonsStore‘,
proxy: {
type: ‘a(chǎn)jax‘,
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();
});
});
解法思路就是： 提前建立一個(gè)loadMask , 在store load 完成后隱藏起來。
其他
1. Extjs 的 LoadMask 可以定制自己需要的load mask 樣式
可以通過配置? cls,? maskCls 的 Class 來設(shè)置load 的文字以及圖等樣式。
var myMask = new Ext.LoadMask(myPanel, {msg:"Please wait..."});
myMask.show();
2. 在 Ext.ComponentLoader 這種組件中(比如tab 頁中配置loader的方式)， 可以通過配置loadMask 的配置來設(shè)置是否顯示load mask 以及顯示怎么樣的loadMask(可以配置成boolean 型和Object 類型的值)
原文：http://blog.csdn.net/oscar999/article/details/27176791
總結(jié)
以上是生活随笔為你收集整理的extjs ajax 遮罩层,[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nba2k17安卓中文版官网下载（nba
- 下一篇： web project、web serv