html:
<body>
<div id="
loading-mask" style=""></div>
<div id="
loading">
<div class="loading-indicator">
<img src="resources/extanim32.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Loading...
</div>
</div>
......
CSS:
#loading-mask{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:20000;
background-color:white; //此处设置遮照颜色
}
#loading{
position:absolute;
left:45%;
top:40%;
padding:2px;
z-index:20001;
height:auto;
}
#loading img {
margin-bottom:5px;
}
#loading .loading-indicator{
background:white;
color:#555;
font:bold 13px tahoma,arial,helvetica;
padding:10px;
margin:0;
text-align:center;
height:auto;
}
JS:
....
var viewport = new Ext.Viewport({ //new 对象时,即自动创建显示,以下函数在组件显示出来后执行.
layout:'border',
items:[ hd, api, mainPanel ]
});
setTimeout(function(){ //此函数放在所有组件(显示出来)后(如上例), 或放在显示控制函数里.
Ext.get('loading').remove(); //删除图片和方字
Ext.get('loading-mask').fadeOut({remove:true}); //淡出效果方式,删除整个遮照层
}, 250); //250毫秒后执行此函数
posted on 2009-05-25 16:05
紫蝶∏飛揚↗ 阅读(3585)
评论(0) 编辑 收藏 所属分类:
EXTJS