(转)Ext中使用mask方法来模拟请求进度

最新推荐文章于 2019-05-16 16:01:30 发布

iteye_614

最新推荐文章于 2019-05-16 16:01:30 发布

阅读量127

点赞数

文章标签： EXT CSS HTML

本文链接：https://blog.csdn.net/iteye_614/article/details/81971699

版权

在实际开发系统中，经常会点击菜单M1，显示页面P1，然后点击菜单M2，显示P2；

说明：其中P1和P2页面都显示在同一个frame：pageFrame中

由页面P1切换到显示页面P2时，可能需要一定的时间，以前的做法是这段时间可以显示一个进度条，表示正在请求页面P2，最近一段时间看到了Ext的Element的mask方法，使用了一下，感觉可以使用它模拟一个进度条

首先，菜单的点击事件中赋值pageFrame的src，调用方法maskDocAll()，假如页面MyPage.html包含pageFrame，则这个方法定义在MyPage.html中，代码如下：

MyPage.html:
<html>
<head>
<style type="text/css">
.page-loading div{
padding:5px 10px 5px 25px;border:1px;
background: #fbfbfb url( '../extimages/extanim32.gif' ) no-repeat 5px 5px;
line-height: 36px;
}
</style>

<script language="">
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();
}
function unmaskDocAll() {
var body = Ext.getBody();
body.unmask();
}
</script>
</head>
<frameset>
<!-- 省略菜单frame....... ->
<frame id="pageFrame" src="" οnlοad="unmaskDocAll()"/>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
注意body.mask(...)这段代码，其中page-loading是自定义的css，实际上是现实一个动态装载的图片。

然后pageFrame的onload事件中对body进行unmask，即模拟的进度条消失.

效果如下（点击左边菜单，页面切换时的图片，底部整个为灰色空白页面，上面显示动态装载图片和文字正在请求页面...字样）：

iteye_614

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(转)Ext中使用mask方法来模拟请求进度

在实际开发系统中，经常会点击菜单M1，显示页面P1，然后点击菜单M2，显示P2；说明：其中P1和P2页面都显示在同一个frame：pageFrame中由页面P1切换到显示页面P2时，可能需要一定的时间，以前的做法是这段时间可以显示一个进度条，表示正在请求页面P2，最近一段时间看到了Ext的Element的mask方法，使用了一下，感觉可以使用它模拟一个进度条首先，菜单的点击...
复制链接

扫一扫