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

xiayh04

浏览: 174740 次
性别:
来自: 上海

最近访客更多访客>>

wangzd_java

bendit

ganxueyun

1171459431

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web技术

EXT CSS HTML

在实际开发系统中，经常会点击菜单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>

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>

<!-- 省略菜单frame....... ->

</frameset>

注意body.mask(...)这段代码，其中page-loading是自定义的css，实际上是现实一个动态装载的图片。

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

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

分享到：

ExtJS textField 关于验证(Regex)的一些属 ... | 重定向（Redirect）相关的几个问题

2010-07-02 16:24
浏览 1277
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论