随笔-9  评论-168  文章-266  trackbacks-0
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 紫蝶∏飛揚↗ 阅读(3593) 评论(0)  编辑  收藏 所属分类: EXTJS

只有注册用户登录后才能发表评论。


网站导航: