首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-11-03 
Ext中使用mask方法来模拟请求进度在实际开发系统中,经常会点击菜单M1,显示页面P1,然后点击菜单M2,显示P2;

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

在实际开发系统中,经常会点击菜单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><!--?? 引入Ext的js文件和css文件 --><script language="">Ext中运用mask方法来模拟请求进度var?t?=?"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正在请求页面...&nbsp;&nbsp;";
Ext中运用mask方法来模拟请求进度function?maskDocAll()?{
Ext中运用mask方法来模拟请求进度????var?body?=?Ext.getBody();
Ext中运用mask方法来模拟请求进度????//body.mask(t,'x-mask-loading');
Ext中运用mask方法来模拟请求进度????//window.top.pageFrame.document.body.innerHTML?=?"";
Ext中运用mask方法来模拟请求进度????body.mask(t,'page-loading');
Ext中运用mask方法来模拟请求进度????Ext.fly(Ext.query('div[class^=ext-el-mask-msg]')[0]).center();????????
Ext中运用mask方法来模拟请求进度}function unmaskDocAll() {
??var body = Ext.getBody();
??body.unmask();
?}</script>
</head><frameset>?? <!--??? 省略菜单frame....... ->?? <frame id="pageFrame" src="" onload="unmaskDocAll()"/></frameset><noframes>?
<body>
</body>
</noframes>?
</html>

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

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

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

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

热点排行