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. 加密学教程（Cryptography Tuturials）文件夹

    加密学教程(Cryptography Tuturials) 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&quo ...

  2. Androlid入门之文件系统操作（三）文件读写

         import java.io.*; import android.app.Activity; import android.os.Bundle; import android.view.Vi ...

  3. map集合遍历的五种方法

    package com.jackey.topic; import java.util.ArrayList;import java.util.HashMap;import java.util.Itera ...

  4. B1024 生日快乐 递归。。。

    bzoj1024叫生日快乐,其实很简单,但是没看出来就很尴尬... Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一个边长分别为 X 和 Y 的矩形蛋糕.现在包括win ...

  5. git常见冲突及解决办法

    1.内容冲突 产生冲突的原因:两个用户修改了同一个文件的同一块区域,git会报告内容冲突.我们常见的都是这种. 解决冲突的办法:编辑冲突文件,修改冲突. 例如:冲突文件test.c test.c发生冲 ...

  6. codevs1222 信与信封问题

    1222 信与信封问题  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond     题目描述 Description John先生晚上写了n封信,并相应地写了 ...

  7. JavaScript学习三

    2019-05-30 20:38:50 逻辑运算符 && || ! !如果对非布尔值取反,则将会把数值变成布尔值,然后再取反 隐式类型转化 为任意的数据类型做两次非运算,既可将其转换成 ...

  8. JavaScript是按值传递还是按引用传递?

    JavaScript是按值传递的,但是要分情况才知道传递之后原来的值会不会变,不然会出现你想都想不出来的bug 一.按值传递--元类型输入tip:元类型( number, string, boolea ...

  9. iOS 点击事件传递及响应

    1.iOS中的事件 iOS中的事件可以分为3大类型: 触摸事件 加速计事件 远程控制事件这里我们只讨论iOS中的触摸事件. 1.1响应者对象(UIResponder) 在iOS中不是任何对象都能处理事 ...

  10. ACM_来自不给标题的菜鸟出题组（巴什博弈+素数判定）

    来自不给标题的菜鸟出题组 Time Limit: 2000/1000ms (Java/Others) Problem Description: 大B和小b合作出一道程序设计月赛的题,他们的想法是给定一 ...