ExtJS之Progressbar進度條的手動模式和自動模式。

        主要介紹EXTJS中常用的進度條的兩種基本實現。

        手動模式和自動模式。

        A：手動模式：

                               手工更新進度條主要是通過調用進度條updateProgress方法結合週期性定時方法調用來實現progress動態更新。

                               調用格式：                              

updateProgress([Float value], [String text], [Boolean animate])

value: 默認爲0，超過1，進度條也不會重新開始。
text ： 進度條上顯示地文字
animate :是否使用動畫效果，默認爲false

返回值： Ext.ProgressBar

     結合具體的例子：

<script type="text/javascript">
		Ext.onReady(function(){
			var msgBox = Ext.MessageBox.show({
                title : 'tip',
                msg : 'Dynamic updating progress and information..',
                modal: true,
                width : 300,
                progress : true
			});


			var count = 0;	
			var percentage = 0;	
			var progressText = '';

			var task = {
                 run : function(){
                 	count++;
                 	percentage = count / 10;

                 	//generator the information of progress bar
                    progressText = 'current finished :' + percentage * 100+'%';
                    msgBox.updateProgress(percentage,progressText,'the current time: ' +
                    	   Ext.util.Format.date(new Date(),'Y-m-d g:i:s'));
                    //refresh ten times will close the progress.
                    if(count > 10){
                    	Ext.TaskManager.stop(task);
                    	msgBox.hide();	//hide the MessageBox
                    }
                 },
                 interval : 1000 	//controller the event interval
			}

			Ext.TaskManager.start(task);
		});
	</script>

   手工更新的進度條合適於那些可以掌控執行狀態的長時間操作，例如上傳進度，但是有些情況無法準確掌控程序的實時動態，在這種情況下就可以使用自動模式更新進度條。

        B：自動模式

                  自動模式的進度條其實也不能準確反映程序的執行狀態，主要是給用於提供一個友好的提示，表示正在執行一個耗時的操作。主要是用到wait方法，進行一些必要的配置就可以得到一個比較理想的自動更新的進度條了。

                

調用格式：
wait([Object  config])

config : 是一個自動更新進度條的配置對象。包含了有用的配置參數。

duration   Number      設定進度條在被重置之前要運行的時間長度，單位毫秒。

interval   Number      設定更新進度條的時間間隔，單位毫秒。默認是1000毫秒。

increment  Number      設定進度條的分段數量，也就是進度條分多少次完成更新。默認爲10次。實際次數超過之後會重置。

text       string      設定進度條上顯示地文字。

fn         Function    設定在進度條更新完畢之後被調用，該回調函數沒有參數。

自動模式下的進度條的實現例子：

Ext.onReady(function(){

             var progressBar = new Ext.ProgressBar({
                text :'do something..',	//進度條上顯示地文字
                width : 300,	//設置進度條的寬度
                renderTo: 'ProgressBar'	//與renderTo 效果相同，定義HTML標籤容器

             });

             //自動模式調用wait , 上面的手動模式是通過TaskManager來週期調用函數實現的。
             progressBar.wait({
                  duration: 10000,	//進度條持續更新10秒鐘
                  interval : 1000,	//沒1秒更新一次
                  increment: 10,	//進度條分10次更新完畢
                  text : 'waiting',
                  scope : this,	    //回調函數執行範圍
                  fn : function(){
                  	alert('更新完畢..');  		//更新完畢之後就會調用回調函數
                  }
             });
		});

在上面的手動模式和自動模式中： 手動模式就是主要通過TaskManager的start和stop方法來實現週期性調用updateProgress方法實現。自動模式就是通過wait方法加上config配置參數配置實現改變。其中，進度條還是可以自定義樣式，還是有 更多自定義的靈活性。需要根據不同的需求來實現進度條樣式。