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. 从头认识Spring-2.7 自己主动检測Bean（1）-@Component @Repository @Service @Controller

    这一章节我们来讨论一下自己主动检測Bean. 1.domain 厨师类: package com.raylee.my_new_spring.my_new_spring.ch02.topic_1_19; ...

  2. 【iOS】代理传值与块代码传值

    主线程与子线程常常须要进行数据的传递.不同的类之间,不同的控制器之间都须要. 并且常常须要监听一个动作的完毕.而后才去做对应事件. (代理是一对一的关系). 一.代理传值 代理是一种设计模式. iOS ...

  3. Codeforces Round #281 (Div. 2) C. Vasya and Basketball 排序

    C. Vasya and Basketball   Vasya follows a basketball game and marks the distances from which each te ...

  4. ambarella H2 添加文件到ext4文件系统

    方法1: ambarella/rootfs目录下有skeleton(骨架)目录,此目录下就是文件系统的各个目录, [root@jz4775dev]# ls skeleton/ bin debug de ...

  5. oc59--匿名分类

    // // main.m // 匿名分类(延展) // 可以为某个类扩展私有的成员变量和方法,写在.m文件中, // 分类不可以扩展属性,分类有名字,匿名分类没有名字. #import <Fou ...

  6. [RK3288][Android6.0] 调试笔记 --- 普通串口的添加 【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/54574073   标签: rk3288 串口添加 2017-01-16 14:52 1079 ...

  7. PCB MS CLR 聚合函数 joinString加排序实现

    准备着手,动态列SQL查询,要实现动态列SQL,会运用到聚合函数,而SQL本身聚合函数有限, 无满足此用户任意字段组合变化,再加上工艺流程重复相同工序,如;沉铜1,沉铜2对应工序代码都是相同的 而通常 ...

  8. css3 文本模型

    我前期是一名前端开发者,经常会遇到关于文本模型的问题,很多地方我们会经常遇到这种问题.例如栏目的标题,在设计师给我们图的时候并不会考虑到标题的长度,所以我们自己开发的过程中自己注意这一点. 首先和大家 ...

  9. jq中append()、prepend()、after()、before()的区别

    jq中append().prepend().after().before()的区别详解 .append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标 ...

  10. 域名转让（bcd.cn,tjcpda.com,jscpda.com,fjcpda.com）

    因本人工作有所调整,现对所拥有的域名全部转让,有需要者请与我联系,谢谢. bcd.cn tjcpda.com jscpda.com fjcpda.com 联系方式: QQ:1181608198 Ema ...