Ext js 的几种进度条(转)

<script type="text/javascript">

	/*1.使用MessageBox.wait()方法实现进度条*/
    function Read1() {
        Ext.Msg.wait("内容","Extjs进度条应用",{text:"正在加载。。。"});
    }
    /*2.使用MessageBox.show()方法中的配置参数wait:true,实现进度条*/
    function Read2() {
        Ext.Msg.show({
        modal:false,
        title:"标题",
        msg:"内容",
        closable:true,
        width:300,
        wait:true
        })
    }
    /*3.使用MessageBox.show()方法中的配置参数progress:true,实现静态进度条*/
    function Read3() {
        Ext.Msg.show({
        title:"标题",
        msg:"内容",
        modal:true,
        closable:true,
        width:300,
        progress:true,
        progressText:"保存进度"
        })
    }

    function Read4() {
        var progressBar=Ext.Msg.show({
        title:"标题",
        msg:"通过进度的大小来控制进度",
        progress:true,
        width:300
        });
        var count=0;
        var bartext="";
        var curnum=0;
        Ext.TaskMgr.start({
            run:function () {
                count++;
                if (count>=10) {
                    progressBar.hide();
                }
                curnum=count/10;
                bartext=curnum*100+"%";
                progressBar.updateProgress(curnum,bartext);
            },
            interval:1000
        })
    }
    function Read5() {
        var progressBar=Ext.Msg.show({
            title:"标题",
            msg:"通过固定时间完成进度",
            width:300,
            wait:true,
            waitConfig:{interval:500,duration:4500,fn:function () {
                Ext.Msg.hide();
            }},
            closable:true
        });
    }

    function Read6() {
        var msgbox=Ext.Msg.show({
            title:"进度条应用",
            msg:"提示内容",
            closable:true,
            width:300,
            modal:true,
            progress:true
        });
        var count=0;
        var curnum=0;
        var msgtext="";
        Ext.TaskMgr.start({
            run:function () {
                count++;
                if (count>10) {
                    msgbox.hide();
                }
                curnum=count/10;
                msgtext="当前加载:"+curnum*100+"%";
                msgbox.updateProgress(curnum,msgtext,‘当前时间:‘+new Date().format(‘Y-m-d g:i:s A‘));
            },
            interval:1000

        })

    }
    function Read7() {
        var progressBar=new Ext.ProgressBar({
            text:‘working......‘,
            width:300,
            applyTo:id2
        });
        var count=0;
        var curnum=0;
        var msgtext="";
        Ext.TaskMgr.start({
            run:function () {
                count++;
                if (count>10) {
                    progressBar.hide();
                }
                curnum=count/10;
                msgtext=curnum*100+"%";
                progressBar.updateProgress(curnum,msgtext);
            },
            interval:1000
        })
    }
    function R8() {
        //自动模式进度条
        var progressBar=new Ext.ProgressBar({
            text:‘waiting......‘,
            width:300,
            applyTo:id2
        });
        progressBar.wait({
            interval:1000,
            duration:10000,
            increment:10,
            scope:this,
            fn:function () {
                alert("更新完毕");
            }
        });
    }

    Ext.onReady(R8);
    </script>

Read1方法是通过使用MessageBox.wait()方法实现进度条。

wait()方法有三个参数msg:String类型,用来显示弹出框内容;title:String类型,弹出框的标题,该参数不是必须的;config:Object类型,进度条的配置,该参数不是必须的。

Read2方法是使用MessageBox.show()方法中的配置参数wait:true,实现动态进度条。

Read3方法是使用MessageBox.show()方法中的配置参数progress:true,实现静态进度条。

Read4方法是(1)使用MessageBox.show()方法中的配置参数progress:true,实现静态进度条,(2)使用TaskManager的start方法和MessageBox.updateProgress()方法实现动态进度条。

Read5方法是使用MessageBox.show()方法中的配置参数wait:true,实现动态进度条,然后配置waitConfig:Object类型,进行进度条配置。

Read6方法和Read4实现一样只是MessageBox.updateProgress参数不同。

Read7方法是(1)创建一个进度条对象。(2)使用TaskManager的start方法和ProgressBar.updateProgress()方法实现动态进度条。

Read8方法(1)创建一个进度条对象。(2)使用ProgressBar.wait()配置进度条功能。

ProgressBar.wait()是通过config进行参数配置的。

1.duration : Number类型,持续时间。

2.interval : Number类型,更新时间。

3.increment : Number类型,进度条没更新一次增加多少,总共100,默认每次增加10。

4.fn : Function类型,更新完毕后所要执行的方法。你可以把进度关闭和一些关闭进度条后的一些业务放到该函数中。

作者:fubo1990
来源:CSDN
原文:https://blog.csdn.net/fubo1990/article/details/50922082

原文地址:https://www.cnblogs.com/zeng-qh/p/9885049.html

时间: 2024-10-11 02:16:03

Ext js 的几种进度条(转)的相关文章

Ext.js 中 25种类型的Ext.panel.Tool

通过Ext.panel.Panel的tools配置项来设置Ext.panel.Tool实例. 要注意的一点是,Ext框架提供的Ext.panel.Tool仅包含按钮图标而具体的点击事件处理函数需要我们自定义. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

JS框架_(JQbar.js)柱状图动态百分比进度条特效

柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</title> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/jqbar.css" /

CSS3和js谷歌Material Design进度条插件

mprogress是一款使用纯JS和CSS3制作的谷歌Material Design样式的进度条插件.该插件没有依赖任何外部库.它可以制作4种类型的进度条动画,使用扁平化设计,非常时尚. 该进度条插件有4种类型的动画方式,分别是:确定型.缓冲型.不确定型和查询确定型. mprogress是移动设备优先的js插件,?所有类型的进度条都可以工作在Chrome 和 Firefox浏览器上.Determinate类型的进度条可以工作在所有浏览器上. 在线演示:http://www.htmleaf.com

JS -- 异步加载进度条

今天在博客园问答里面看到博友问道怎么实现Ajax异步加载产生进度条. 很好奇就自己写了一个. 展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1.当用户点击load button执行异步请求. 调用方法 出现加载条 2.怎么实现进度条呢? 1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法修改界面值 2) 在document.body 新增一个动态的div.

js页面加载进度条

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

js页面加载进度条(这个就比较正式了,改改时间就完事儿)

不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="js/jquery-1.8.3.min.js"></scrip

EXT.JS以下两种写法在初始载入时是一样的效果

/* Ext.application({ name: 'MyfirstApplication', launch: function () { Ext.Msg.alert("Hello", "My first App!"); } }); */ Ext.onReady(function () { //alert("This is my first Extjs app !"); //Ext.Msg.alert("Alert", &q

Android简易实战教程--第二话《两种进度条》

点击按钮模拟进度条下载进度,"下载"完成进度条消失. 代码如下: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_

自定义View,又一种进度条的呈现,CircleProgressView使用解析

转载请注明出处王亟亟的大牛之路 话不多说,先上效果图 循环旋转的状态 项目结构 一个Sample包,一个Lib包.Lib包里面其实只有一个累,很多内容都在素材文件里,比较建议把内容复制出来,贴到自己的项目中 主类: public class MainActivity extends ActionBarActivity { CircleProgressView mCircleView; Switch mSwitchSpin; Switch mSwitchShowUnit; SeekBar mSee