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配置参数配置实现改变。其中，进度条还是可以自定义样式，还是有 更多自定义的灵活性。需要根据不同的需求来实现进度条样式。