Ext.ProgressBar有二种模式：手动和自动；
手动：自己控制显示、进度、更新、清除。自动只需要调用Wait方法即可。

配置项：

 
配置项 类型 说明
renderTo String 指定页面上已经存在的元素or元素id，该元素成为新组件的容器
height Number  
width Bunber  
cls String 一个可选的样式表扩展常用于自定义式样。默认是空 
<!DOCTYPE html>

<html>

   <head>

    <meta http-equiv="Content-Type"  content="text/html;charset=utf-8">

    <link rel="stylesheet" type="text/css" href="../../study/EXTJS/ext-4.2.1.883/resources/css/ext-all.css" />

    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/bootstrap.js"></script>

    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>

   </head>

   <body>

    <script type="text/javascript">

function autoProgress()

{

    var config = {

        text:'working...',

        width:300,

        renderTo:'autoProgressBar'

    }  

    var progressBar = new Ext.ProgressBar(config);  

    config = {

        duration:10000,          //进度条将持续显示10s

        interval:1000,           //进度条将每1s更新一次

        increment:11,            //进度条分11次更新完毕

        scope:this,             //回调函数执行范围

        fn:function(){         //跟新完毕后调用回调函数

            progressBar.hide();

            Ext.MessageBox.alert('提示','跟新完毕！');

            //alert("更新完毕！");

        }

    }  

    progressBar.wait(config);  

</script>

<a href="javascript:autoProgress();" mce_href="javascript:autoProgress();">自动模式进度条(适合无法准确掌握时间)</a>

<div id="autoProgressBar">autoProgress</div>

        </body>

</html>

自动进度条

<!DOCTYPE html>

<html>

   <head>

    <meta http-equiv="Content-Type"  content="text/html;charset=utf-8">

    <link rel="stylesheet" type="text/css" href="../../study/EXTJS/ext-4.2.1.883/resources/css/ext-all.css" />

    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/bootstrap.js"></script>

    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>

 <script type="text/javascript">

 function handMoveProgress()

{

    var config = {

        text:'working...',

        width:300,

        renderTo:'handProgressBar'

    }  

    var progressBar = new Ext.ProgressBar(config);  

    var count = 0;

    var percentage = 0;

    var progressText = '';  

    config = {

        run:function(){

            count++;  

            if(count > 10)

            {

                progressBar.hide();

                Ext.TaskMgr.stopAll();    //终止定时调用^-^

                return;

            }  

            percentage = count/10;

            progressText = percentage*100 + '%';  

            progressBar.updateProgress(percentage,progressText);

        },

        interval:5000

    }  

    Ext.TaskMgr.start(config);

}

</script>

   </head>

   <body>

 <a href="javascript:handMoveProgress();" mce_href="javascript:onReady();">手工模式进度条(适合可以掌握执行状态)</a>

<div id="handProgressBar">handMoveProgress</div>

        </body>

</html>

手动进度条

书上的没有调试通，查看网上demo，tmd也没有看到效果。有时间再体会。

学习EXTJS6（5）基本功能-进度条组件的更多相关文章

  1. Android学习笔记(24):进度条组件ProgressBar及其子类

    ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...

  2. 手把手教你实现一个 Vue 进度条组件！

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  3. 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  4. 基于Vue的事件响应式进度条组件

    写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...

  5. 详解Bootstrap进度条组件

    在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...

  6. 【Android 应用开发】 自定义 圆形进度条 组件

    转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...

  7. 数字进度条组件NumberProgressBar

     数字进度条组件NumberProgressBar NumberProgressBar是一款数字进度条组件.它不仅可以通过进度条的变化展现进度,还可以通过跟随文字精确表示进度值.开发者可以对进度条进行 ...

  8. vue 的进度条组件

    先看效果: 要想实现如上图的,进度跳效果,有两种方式,首先介绍第一种: 1.自己用 div 写一个,代码如下 <template> <div class="mfc-slid ...

  9. progressbar进度条组件

    Progressbar 进度条组件 通过$.fn.progressbar.fn.defaults重写默认的defaults进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更 ...

随机推荐

  1. jQuery事件整理回想

    一.事件 1.载入DOM $(document).ready() 这个第一节里具体介绍了 2.事件绑定 jQuery定义了bind()方法作为统一的接口.用来为每个匹配元素绑定事件处理程序. 其基本的 ...

  2. Android 系统开机logo的修改【转】

    本文转载自:http://blog.csdn.net/yandongqiangZHRJ/article/details/8585273 看到了好几个修改logo的博文,但是说的不是很清楚,在这里亲手送 ...

  3. hdu 2222(AC自动机模版题）

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  4. Bayesian Regression

    Thus we see that there are very close similarities between this Bayesian viewpoint and the conventio ...

  5. python 内存泄露的诊断

    对于一个用 python 实现的,长期运行的后台服务进程来说,如果内存持续增长,那么很可能是有了"内存泄露" 一.内存泄露的原因 对于 python 这种支持垃圾回收的语言来说,怎 ...

  6. 前端面试准备之JavaScript

    1.数据类型. JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String.还有1种复杂数据类型——Object,Obje ...

  7. fsockopen get,post 封装 （转）

    function http_request($url, $method = 'GET', $postfields = NULL, $headers = array()) {   $parse = pa ...

  8. The Moronic Cowmpouter(负进位制转换)

    http://poj.org/problem?id=3191 题意:将一个整型的十进制整数转化为-2进制整数. #include <stdio.h> #include <algori ...

  9. Java多线程技术-wait/notify/join

    wait/notify的作用 wait()方法的作用是使当前执行代码的线程进行等待,wait()是Object类的方法,用来将当前线程置入预执行队列中,并且在wait()所在的代码处停止执行,直到接到 ...

  10. html body中的标签2

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...