效果就是一个panel,是空白的,然后这个panel写一个loadPanel的方法,调用这个方法可以动态为panel加载组件,期间需要显示遮罩来提示'加载中,请稍候...',如果加载成功则除去遮罩层,并返回加载的组件,如果不成功则遮罩提示'加载失败'并返回null
我的代码如下,但只是美好的幻觉代码而已:
[code="java"]
myPanel=Ext.extend(Ext.Panel,{
loadPanel : function(config){
this.el.mask('加载中,请稍候...');
//创建组件
var c = null;
try{
c = Ext.create(config);
this.add(c);
this.doLayout();
this.el.unmask();
}
catch(err){
this.el.mask('加载失败!');
}
finally{
return c;
}
}
});
[/code]
上面的代码看起来好像挺有条理的,但有很多破绽:
1.'加载中'的提示如果不强行中断(比如在创建组件前alert中断进程),那么永远都看不见这个提示,就已经执行到create了,但是由于javascript是单线程的,所以在create的时候是假死状态,根本不可能显示出'加载中'的提示,我怀疑mask是延时执行的!
2.由于是单线程,所以除非try抛出异常,否则肉眼根本看不见遮罩层的显示,因为单线程导致浏览器假死.
3.如果使用defer延迟create的执行,那么这个方法又无法返回结果,因为javascript没有sleep等待功能,defer只是推迟几秒再执行指定的方法,只是一个回调,并不能强制线程等待,所以用defer则永远得不到create出来的c
希望大家帮忙如何实现组件加载的遮罩效果