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
紫蝶∏飛揚↗ 閱讀(3604)
評論(0) 編輯 收藏 所屬分類:
EXTJS