ExtJS操作数据时的等待界面

不是什么新东西，就是一个自动滚动的进度条提示框，它经常被用在一个耗时的交互操作当中，这段等的蛋疼的时间来干么呢？咱总不能给人播放一段视频吧？！所以就出现这么个货。但是程序员需要在交互操作完成之后去关闭它。以前也是用过MessageBox.wait()来调出等待界面，用户界面还算比较友好吧，这里简要的介绍一下具体的使用方法(来自网络)。

1. 调用格式:wait( String msg, [String title], [Object config] )    
2.   
3. 参数说明：   
4. msg：显示的信息内容。   
5. [String title]：提示框的标题，为可选参数。   
6. [Object config]：用于配置进度条的配置对象，为可选参数。  

下面来看看具体的使用示例：

1. Ext.MessageBox.wait(‘Loadng’, ‘Please Wait…’);//显示等待信息框   
2.   
3. Ext.MessageBox.hide();//完成后隐藏消息框   

就这么简单？！就这么简单。

通过固定的时间来控制加载进度示例：

 

1.         Ext.get("btn1").on(   
2. 　　　　　"click",   
3. 　　　　　function(){   
4. 　　　　　　Ext.MessageBox.show({   
5. 　　　　　　　　title:"时间进度条",   
6. 　　　　　　　　msg:"5s后关闭进度框",   
7. 　　　　　　　　progress:true,   
8. 　　　　　　　　width:300,   
9. 　　　　　　　　wait:true,   
10. 　　　　　　　　waitConfig:{interval:600},//0.6s进度条自动加载一定长度   
11. 　　　　　　　　closable:true  
12. 　　　　　　});   
13. 　　　　　　setTimeout(function(){Ext.MessageBox.hide()},5000);//5后执行关闭窗口函数   
14. 　　　　　}  

waitConfig的参数使用说明：

1.interval:进度的频率

2.duration：执行进度的持续时间，超过这个时间后，interval失效，不再产生进度效果，但进度狂也不会消失。

3.fn:duration的时间到后执行的函数

那上面的示例的写法可以改写为：

1. Ext.get("btn1").on(   
2. 　　　　　"click",   
3. 　　　　　function(){   
4. 　　　　　　Ext.MessageBox.show({   
5. 　　　　　　　　title:"时间进度条",   
6. 　　　　　　　　msg:"5s后关闭进度框",   
7. 　　　　　　　　progress:true,   
8. 　　　　　　　　width:300,   
9. 　　　　　　　　wait:true,   
10. 　　　　　　　　waitConfig:{   
11. 　　　　　　　　　　　　　　　interval:600,   
12. 　　　　　　　　　　　　　　　duration:5000,   
13. 　　　　　　　　　　　　　　　fn:function(){   
14. 　　　　　　　　　　　　　　　　Ext.MessageBox.hide();//让进度条消失   
15. 　　　　　　　　　　　　　　　}},   
16. 　　　　　　　　closable:true  
17. 　　　　　　});　　　　　　   
18. 　　　　　}   
19. 　);