ExtJS之进度条 ( Ext.ProgressBar)

最新推荐文章于 2021-07-21 16:06:18 发布

weixin_33752045

最新推荐文章于 2021-07-21 16:06:18 发布

阅读量289

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Mr-Joe/archive/2012/02/22/2362641.html

本文介绍了如何使用ExtJS创建手工模式和自动模式的进度条。手工模式通过更新计数器来逐步显示进度，自动模式则设定初始参数后自动完成进度更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手工模式的进度条

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 //是否启用动画效果

           });
效果: