標籤：des c style class blog code
前言Load Mask(遮罩)效果，就是在頁面還沒有完全顯示出來之前， 加上一個轉裝轉的效果。
類似：
添加這樣的效果有兩個好處：
1. 在頁面沒完全show出來之前， 把後面的頁面給遮罩起來， 防止進行一些非法的操作。
2. 如果頁面show出來的時間比較長的話， 可以暫時吸引使用者的注意力(也就是提高 User Experience).
在Extjs 中， Ext js 的使用方式有多種。
你有可能會發現為什麼有的狀況下load mask 不出現？ 且聽下面一一道來。。。
注意， 如果讀的不是服務端資料，而是本機資料的話， 是不會加mask的(本機資料比較快，的確是沒有必要加)。
類似這樣來定義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‘ } }});
顯示一個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>
<%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();%>
這裡為了延長服務端時間， 使用Thread 的方式停留了10秒。
呈現的效果就是前言部分的貼圖狀況
情境描述如下：
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, 就會出現遮罩效果。 後面的頁面被遮罩了。
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();
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
