慢慢按书上的作。

<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
        <script type="text/javascript" src="ExtJs/ext-all.js"></script>
        <script type="text/javascript" src="ExtJs/bootstrap.js"></script>
        <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
        <STYLE TYPE="text/css">
            .cutom .x-progress-inner {
                height: 17px;
                background: #fff;
            }
            .custom .x-progress-bar {
                height: 15px;
                background: transparent url("http://127.0.0.1:8000/ExtJs/exclamation.gif") repeat-x 0 0;
                border-top: 1px solid #BEBEBE;
                border-bottom: 1px solid #EFEFEF;
                border-right: 0;
            }
        </STYLE>
    <script type="text/javascript">
            Ext.onReady(function(){
                /*
                var ProgressBar = new Ext.ProgressBar({
                    width: 300,
                    renderTo: 'ProgressBar'
                });

                var count = 0;
                var percentage = 0;
                var progressText = '';

                Ext.TaskManager.start({
                    run:function(){
                        count++;
                        if(count>10) {
                            ProgressBar.hide();
                            }
                        percentage = count/10;
                        progressText = percentage * 100 + '%';
                        ProgressBar.updateProgress(percentage, progressText, true);
                    },
                    interval: 1000,
                    repeat: 6
                });*/

                var ProgressBar = new Ext.ProgressBar({
                    text: 'working....',
                    width: 300,
                    renderTo: 'ProgressBar',
                    cls: 'custom'
                });
                ProgressBar.wait({
                    duration: 10000,
                    interval: 1000,
                    increment: 10,
                    text: 'wating',
                    scope: this,
                    fn: function() {
                        alert('update finish!');
                    }
                });
            });
    </script>
</head>
<body>
    <div id='ProgressBar'></div>
</body>
</html>

ExtJs之进度条实现的更多相关文章

  1. Extjs实现进度条

    做Extjs开发中,往往后台程序可能要执行一段时间才能得到返回结果,加入进度条可以提高客户体验度,以下为两种便捷的方式: 1.提交数据前用Ext.Msg.wait('提示','正在处理数据,请稍候') ...

  2. Extjs 使用fileupload插件上传文件 带进度条显示

    一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...

  3. 2014年12月20日00:33:14-遮罩+进度条-extjs form.isvalid

    1.Extjs : 遮罩+进度条 2.Extjs: extjs form.isvalid http://stackoverflow.com/questions/19354433/extjs-form- ...

  4. 实用ExtJS教程100例-003：进度条对话框Ext.MessageBox.progress

    在上一篇内容中我们介绍了三种常用的MessageBox提示框,在这篇文章中,我们将演示如何在对话框中使用进度条. 进度条对话框 我们可以使用下面的代码来在MessageBox中显示一个进度条: Ext ...

  5. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  6. 学习EXTJS6（5）基本功能-进度条组件

    Ext.ProgressBar有二种模式:手动和自动:手动:自己控制显示.进度.更新.清除.自动只需要调用Wait方法即可. 配置项:   配置项 类型 说明 renderTo String 指定页面 ...

  7. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  8. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  9. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

随机推荐

  1. 微软云平台媒体服务实践系列 2- 使用动态封装为iOS, Android , Windows 等多平台提供视频点播（VoD）方案

    文章微软云平台媒体服务实践系列 1- 使用静态封装为iOS, Android 设备实现点播(VoD)方案  介绍了如何针对少数iOS, Android 客户端的场景,出于节约成本的目的使用媒体服务的静 ...

  2. mac 系统开发android，真机调试解决方案

    1.确保你的android设备真正链接到电脑上了,我在这里遇到过坑,弄了好久,才发现能充电的线,确无法传递数据过去.所以不要以为随便拿一根线,能充电,就可以传递数据了,我就是这么傻傻的拿了根不能用的数 ...

  3. C++ vector介绍

    <span style="font-family: Arial; ">在此总结一下模板vector的使用介绍</span> 标准库vector类型使用需要的 ...

  4. 20145120 《Java程序设计》实验四实验报告

    20145120 <Java程序设计>实验四实验报告 实验名称:Android开发基础 实验目的与要求: 用SDK成功编译出HelloWorld 实验内容.步骤 PSP 步骤 耗时 百分比 ...

  5. 文档对象模型（DOM）

    文档对象模型(DOM)    DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型:文档型节点.元素节点.特性节点.注释节点等共有12种节点类型.DOM1级定义了 ...

  6. Careercup - Google面试题 - 6407924087783424

    2014-05-07 15:17 题目链接 原题: Given an array of n elements (a1,a2,..ai,...,an). You are allow to chose a ...

  7. 【Construct Binary Tree from Inorder and Postorder Traversal】cpp

    题目: Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume ...

  8. C Shell 中的特殊变量

    恢复 $0,当前脚本的文件名 $n,传递给脚本或函数的参数,n是一个数字,表示第几个参数 $#,传递给脚本或函数的参数个数 $*,传递给脚本或函数的所有参数 $?,函数的返回值 $$,当前shell的 ...

  9. 文件和文件夹同步工具AFiles 1.0 发布

    文件和文件夹同步工具AFiles 1.0  正式发布了! 本软件支持按文件日期或长度的各种比较方式来同步文件或者文件夹. 支持双向同步功能. 支持深层文件夹功能. 可以自动产生比较和同步的记录情况. ...

  10. 来自平时工作中的javascript知识的积累---持续补充中

    ① SeaJs和RequireJS最大的区别 解惑:来自豆友 ② javascript中如何判断undefined var exp = undefined; if (exp === undefined ...