javascript
extjs ajax 遮罩层,[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏
前言
Load Mask(遮罩)效果，就是在頁面還沒有完全顯示出來之前， 加上一個轉(zhuǎn)裝轉(zhuǎn)的效果。
類似：
添加這樣的效果有兩個好處：
1. 在頁面沒完全show出來之前， 把后面的頁面給遮罩起來， 防止進行一些非法的操作。
2. 如果頁面show出來的時間比較長的話， 可以暫時吸引用戶的注意力(也就是提高 User Experience).
在Extjs 中， Ext js 的使用方式有多種。
你有可能會發(fā)現(xiàn)為什么有的狀況下load mask 不出現(xiàn)？? 且聽下面一一道來。。。
JsonStore 加載時會自動加上Load Mask
注意， 如果讀的不是服務(wù)端數(shù)據(jù)，而是本地數(shù)據(jù)的話， 是不會加mask的(本地數(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‘
}
}
});
接下來，就給出一個服務(wù)端讀取數(shù)據(jù)的例子。 這里使用的是jsp.
顯示一個Grid , store 從服務(wù)器端讀取，測試的文件有兩個：
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ù)端時間， 使用Thread 的方式停留了10秒。
呈現(xiàn)的效果就是前言部分的貼圖狀況
在pop Window 的頁面中的Grid 無法顯示mask
場景描述如下：
1. 主頁面是一個有兩個 tab 頁的頁面
2. 在其中一個tab 頁中有一個button, 點擊后彈出一個dialog, 在這個彈出的dialog 中顯示一個上面類似的grid.
出現(xiàn)的狀況是： 彈出頁面的grid 不會有mask 的效果。
Main.html? -- 定義兩個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();
});
說明幾點：
1. pop window? 設(shè)置modal=true, 就會出現(xiàn)遮罩效果。 后面的頁面被遮罩了。
2. 以上的代碼會發(fā)現(xiàn)pop window 中的grid 沒有l(wèi)oad mask 的效果。
出現(xiàn)這種狀況的原因是什么？
把彈出的窗口拖動一下位置，細心一點就會發(fā)現(xiàn)：
loadMask 已經(jīng)出來了， 只是show 的層次不對。看圖
load Mask show在pop window? 的下面了。不難想到 zindex 這個東西了。
Debug 看一下 mask 的z-index 的值， 小于pop window的z-index 的值， 怪不得顯示不出來。
自然有種想法是是否可以設(shè)置load mask 的zindex 的值呢？ 的確 Ext.LoadMask 有 setZindex 這種方法。
但是 1. setZindex 的方法是private 的 2. z-index 是動態(tài)算出來了， 設(shè)置多少不好控制。
Ext js 提供了定制load Mask 的方法， 不妨給grid 添加一個自己的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();
});
});
解法思路就是： 提前建立一個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
- 下一篇： gradle idea java ssm