很多采用JS方式的RAI页面,装载时间比较长,为了解决等待的问题,页面点开的时候实现显示一个LOADING图标,然后加载数据之类的,最后全部加载完成了,取消LOADING图标。
解决方法:
1.在页面开始的时候
增加两个层:
<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>
loading-mask是一个盖住所有页面元素的层,z-index设置成很高,就可以掩盖所有层。
loading层是显示一个LOADING的图标。
#loading-mask {
background-color:white;
height:100%;
left:0;
position:absolute;
top:0;
100%;
z-index:20000;
}
#loading {
height:auto;
left:45%;
padding:2px;
position:absolute;
top:40%;
z-index:20001;
}
2.在所有页面都装载完成以后,释放这两个层
setTimeout(function(){
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250);