在實(shí)際開發(fā)系統(tǒng)中，經(jīng)常會點(diǎn)擊菜單M1，顯示頁面P1，然后點(diǎn)擊菜單M2，顯示P2；
說明：其中P1和P2頁面都顯示在同一個(gè)frame：pageFrame中
由頁面P1切換到顯示頁面P2時(shí)，可能需要一定的時(shí)間，以前的做法是這段時(shí)間可以顯示一個(gè)進(jìn)度條，表示正在請求頁面P2，最近一段時(shí)間看到了Ext的Element的mask方法，使用了一下，感覺可以使用它模擬一個(gè)進(jìn)度條
首先，菜單的點(diǎn)擊事件中賦值pageFrame的src，調(diào)用方法maskDocAll()，假如頁面MyPage.html包含pageFrame，則這個(gè)方法定義在MyPage.html中，代碼如下：
?.page-loading div{
??? ?padding:5px 10px 5px 25px;border:1px;
??? ?background: #fbfbfb url( '../extimages/extanim32.gif' ) no-repeat 5px 5px;
??? ?line-height: 36px;
??? }
</style>
var
?t?
=
?
"
正在請求頁面...
"
;
function
?maskDocAll()?
{
????
var
?body?
=
?Ext.getBody();
????
//
body.mask(t,'x-mask-loading');
????
//
window.top.pageFrame.document.body.innerHTML?=?"";
????body.mask(t,
'
page-loading
'
);
????Ext.fly(Ext.query(
'
div[class^=ext-el-mask-msg]
'
)[
0
]).center();????????
}
??var body = Ext.getBody();
??body.unmask();
?}
</head>
<body>
</body>
</noframes>?
</html>
注意body.mask(...)這段代碼，其中page-loading是自定義的css，實(shí)際上是現(xiàn)實(shí)一個(gè)動態(tài)裝載的圖片。
然后pageFrame的onload事件中對body進(jìn)行unmask，即模擬的進(jìn)度條消失.
效果如下（點(diǎn)擊左邊菜單，頁面切換時(shí)的圖片，底部整個(gè)為灰色空白頁面，上面顯示動態(tài)裝載圖片和文字正在請求頁面...字樣）：
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
