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. 【你你你你在开玩笑吧】什么叫凭借纯兴趣搞ACM？涨姿势了

        好长时间不扯淡了,今天扯个玩玩,吐个槽.     在上海回济南的列车上,回顾起这两天在携程codingtrip颁奖仪式上大牛们的种种心得,姿势涨了不少,着实涨了不少啊.我这样的渣渣毕竟图样图森 ...

  2. 应用程序 /dev/rtc 编程 获取时间 2011-12-13 01:01:06【转】

    本文转载自:http://blog.chinaunix.net/uid-16785183-id-3040310.html 分类: 原文地址:应用程序 /dev/rtc 编程 获取时间 作者:yuwei ...

  3. Single document interface和Multiple document interface

    https://en.wikipedia.org/wiki/Single_document_interface https://msdn.microsoft.com/en-us/library/b2k ...

  4. EOJ 1501/UVa The Blocks Problem

    Many areas of Computer Science use simple, abstract domains for both analytical and empirical studie ...

  5. DCloud-JS-MUI-JS：utils.js

    ylbtech-DCloud-JS:utils.js 1. 导航返回返回顶部 1. var oldBack = mui.back; mui.back = function () { mui.back ...

  6. 77.招聘信息管理 EXTJS 页面

    1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8&quo ...

  7. 第2章 安装Nodejs Nodejs基础 课程介绍

    因为你做任何Nodejs应用,底层无非都是通过调用这些既有的开放的接口,来完成相应的功能.这个要注意,不同版本的Nodejs,接口不一定相同.甚至是相同的接口,使用规范也有区别.我们以这个版本来过这些 ...

  8. B - Taxi（贪心）

    Problem description After the lessons n groups of schoolchildren went outside and decided to visit P ...

  9. 2018年排名前20的数据科学Python库

    Python 在解决数据科学任务和挑战方面继续处于领先地位.业已证明最有帮助的Python库,我们选择 20 多个库,因为其中一些库是相互替代的,可以解决相同的问题.因此,我们将它们放在同一个分组. ...

  10. Java 开源博客 Solo 1.2.0 发布 - 一键启动

    Solo 1.2.0 正式发布了,感谢一直以来关注 B3log 开源的朋友! 在这个版本中,我们引入了一个新的特性 -- 独立模式: 不需要安装数据库.Servlet 容器 只需要安装好 Java 环 ...