ExtJS之 进度条 ( Ext.ProgressBar)

手工模式的进度条

var ProgressBar = new Ext.ProgressBar({
               width: 200,
               renderTo: 'ddd'
           })

           var count = 0;
           var percent = 0;
           var Ptext = '';
           Ext.TaskManager.start({

               run: function () {
                   count += 1;
                   if (count > 5) {          //更新5次
                       ProgressBar.hide();  //隐藏进度条
                   }
                   percent = count / 5;
                   Ptext = percent * 100 + '%'; //百分比
                   ProgressBar.updateProgress(percent, Ptext, true);  //更新滚动条 方法
               },
               interval: 1000

           });
效果:每次更新20%,更新5次后进度条隐藏.如果 想每次更新不同进度,那么可以使用一个随机数,来更新.

 

自动模式进度条

var ProgressBar = new Ext.ProgressBar({

               text: 'waiting...',
               width: 300,
               applyTo: 'ProgressBar',
               renderTo: 'ddd'
           });
           ProgressBar.wait({

               duration: 4000,   //持续多长时间走完,
               interval: 1000,  //  一秒更新一次
               increment: 4,   //四次更新完毕
               text: 'working...',   //进度条文字
               scope: this,         //回调函数执行范围
               fn: function () { documeng.write('更新完毕'); }, //回调函数
               animate:true  //是否启用动画效果

           });

效果: