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. 初探Java中的异常处理

      Java中的异常有以下几种: 1) Error:Java运行时的内部错误. 2) Exception:程序中应该捕获的异常.          RuntimeException:因为编程产生的错误 ...

  2. luogu2577 [ZJOI2005] 午餐 贪心

    题目大意 THU ACM小组的吃饭计划是这样的:先把所有的人分成两队,并安排好每队中各人的排列顺序,然后一号队伍到一号窗口去排队打饭,二号队伍到二号窗口去排队打饭.每个人打完饭后立刻开始吃,所有人都吃 ...

  3. luogu2085 最小函数值

    题目大意 有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x,Ai,Bi,Ci∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有函数值中最小的m个. ...

  4. wox 快速搜索程序

    windows启动栏的搜索,会经常找不到exe. 使用wox可以非常快速的找到启动程序 https://github.com/Wox-launcher/Wox/ 安装完成后,默认alt+space出现 ...

  5. 蓝桥杯--2011--购物券（dfs）

     公司发了某商店的购物券1000元,限定只能购买店中的m种商品.每种商品的价格分别为m1,m2,-,要求程序列出所有的正好能消费完该购物券的不同购物方法. 程序输入: 第一行是一个整数m,代表可购 ...

  6. React-Native 踩坑过程

    踩坑过程: 解决方法就是去 SDK Manager 把 23.0.1 的版本下载了 而如果报错信息中含有bintray.com.gradle.org等网址,请***,反复重试,或者去react nat ...

  7. Redis的事务讲解

    1. Redis事务的概念 是什么: 可以一次执行多个命令,本质是一组命令的集合.一个事务中的所有命令都会序列化,按顺序串行化的执行而不会被其他命令插入 能干嘛:一个队列中,一次性.顺序性.排他性的执 ...

  8. thinkphp 上传多张图片

    tp3.23 没有找到同时上传多张图片 手册有讲过:http://www.kancloud.cn/manual/thinkphp/1876 其实可以通过,多张图片多次上传来到达效果 hmlt: < ...

  9. 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现（MVC）-（一 、上传图片）

    前段时间在做一个微信的项目,遇到了一个上传图片的问题,花了一下午,解决了这个问题,然后把总结出来的代码,分享了出来. 最近又有一个图片+语音的功能, 更是蛋疼, 本次采用的不是File文件上传,然后转 ...

  10. 在PL/SQL中使用带参数的游标

    需求:查询并输出部门名称为SALES的员工信息 SET serveroutput ON; DECLARE CURSOR c_emp(paramName VARCHAR2) IS SELECT * FR ...