Ext等待动画Ext.MessageBox.wait的使用

 

<script type="text/javascript">
    Ext.onReady(function () {
        Ext.MessageBox.wait("正在学习浩然哥哥的博客", "进度条");
    });
</script>

 

语法很简单，但是你肯定会疑问，进度条走到最后，又开始从头走。而且，按理说，进度条总得跟某个进度挂钩啊。这没事它自己走什么呢，连我都不知道程序在走什么进度。
   
看了很多资料才明白，这个控件严格意义上不应该叫进度条，他表示的也不是进度，而是在执行一个耗时的交互操作当中，使用它，告诉浏览者，程序在执行，提醒用户等待程序执行。你可以理解为是一个等待动画。

而他本身的效果也就是反复的走这个条。作用就是在一个耗时的操作过程中，不让浏览者进行别的操作。知道耗时操作完成后，这个控件再被程序员手动关闭。它不能定义一个时间间隔自动关闭，程序员有责任在交互操作完成之后去关闭它。否则他就会一直执行。
   
就相当于，一个收银员，执行收银操作，突然发现没有零钱了，需要执行一个耗时操作（去傍边商店换零钱），这时需要屏蔽店里顾客的所有取款操作。把收银机关掉，并提示顾客（不能执行操作）。当收银员换零钱回来后，打开后执行后面的操作。收银机必须手动打开，否则收银机不会自动开机。
  
Ext.MessageBox.wait就是一个不会自动开机的收银机。把这个东西翻译成进度条并不好,其实称为等待条或者等待动画更合适。
  
如何关闭该等待动画：

     <script type="text/javascript">
        Ext.onReady(function () {
            Ext.MessageBox.wait("正在学习浩然哥哥的博客", "进度条");
        });
        setTimeout(msg_hide, 5000)
        function msg_hide() {
            Ext.MessageBox.hide();
        }
    </script>

因为一个窗口不可能出现两个提示框，所以直接使用Ext.MessageBox.hide();就可以关闭提示框。
 
在这里发现一个现象。浏览器自带的提示框，在弹出提示框的时候，网页是暂停执行的。通过这个例子，我们看出来，extjs的提示框弹出的时候，虽然不允许用户操作。但页面程序是在继续执行的。这也是浏览器提示框所不能的。

原帖地址：http://blog.sina.com.cn/s/blog_a0933f840100x56i.html