711
技術社區[雲棲]
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的提示框彈出的時候，雖然不允許用戶操作。但頁麵程序是在繼續執行的。這也是瀏覽器提示框所不能的。
原帖地址：https://blog.sina.com.cn/s/blog_a0933f840100x56i.html
最後更新：2017-04-02 18:44:46