Ext.ProgressBar 进度条组件

  Ext提供了可以与桌面应用相媲美得进度条工具,他就是Ext.ProgressBar, Ext.ProgressBar继承自Ext.Component，作为进度条工具,该工具具有两种不同的模式:手工模式与自动模式。而本文便是从这两种模式上分开叙述的。

  1. 手工模式进度条的实现

  手工模式下的进度条主要是通过UpdateProgress()方法实现的,调用格式为updateProgress([Float value],[String Text]) 其中value为0-1的数字,若Value大于1,进度条也不会重新开始,Value默认为0;Text是进度条上显示的文字,下面来看一个在手工模式下进度条的例子:

  

 <script type="text/javascript">
    Ext.onReady(function(){
       var newP = new Ext.ProgressBar({
         text: '这是一个进度条!',
         width:300,
         applyTo:'progressBar'
       });
       var count = 0;
       var percentage = 0;
       var ProgressText = '';
       Ext.TaskMgr.start({
          run:function(){
             count++;
             percentage = count/10;
             progressText = percentage * 100 + '%';
             newP.updateProgress(percentage,progressText);
          },
          interval:1000
       });
      });
</script>

  

显示为:

这样,一个粗糙的进度条就实现了,而Ext.TaskMgr.start()函数相当于计划任务,上面的代码中run中的事件是以1000MS为间隔触发的。手工更新适合可以掌握程序执行状态的长时间操作,而大多数情况这样你都无法得知,这时,你就需要使用自动模式进度条。

 

2.自动模式进度条的实现

自动模式下,Ext提供了wait()方法,针对wait方法进行必要的配置,就可以实现自动进度条。

<script type="text/javascript">
    Ext.onReady(function(){
       var newP = new Ext.ProgressBar({
         text: '这是一个进度条',
         width:300,
         applyTo:'progressBar'
       });
       newP.wait({
         duration:10000, 
         interval:1000,
         increment:10,
         scope:this,
         fn:function(){
            alert('更新完毕');
         }
       });
      });
</script>

显示如图:

更新中: 

更新后:

 

关于wait方法的配置,API中比较详细的解释:

 这里就不一一阐述了,当然,Ext进度条还有其他实现的方法,比如使用show,原理与此相似无需多说。
 

 

评论

1 楼 zjchase 2012-06-26  

为嘛我的进度条就是出不来，更新完毕却是有的？