（五）ExtJs进度条的几种实现方式

最新推荐文章于 2021-04-30 15:03:51 发布

fubo1990

最新推荐文章于 2021-04-30 15:03:51 发布

阅读量1.1w

点赞数 4

分类专栏： extjs系统学习文章标签： ext extjs javascript ajax java

本文链接：https://blog.csdn.net/fubo1990/article/details/50922082

版权

extjs系统学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1.今天我们学习ExtJs进度条的实现，我们共介绍8种方式进行实现。

2.我们首先看一下代码和实现的效果，然后进行分析。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>extShowProgress.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<link rel="stylesheet" type="text/css" href="../ext1/resources/css/ext-all.css"/>
	<script type="text/javascript" src="../ext1/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext1/ext-all.js"></script>
  	
  </head>
  
  <body>
    <form id="form1" runat="server">
    <div id="id1">
    <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 Read8() {
        //自动模式进度条
        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(Read8);
    </script>
    </div>
    <div id="id2">
    </div>
    
    </form>
  </body>
</html>

提示：看第一种实现的效果，要把Ext.onReady()中的参数改为Read1。其他几种展示时候做出相应修改即可。

效果图：（除了第3种为静态进度条，剩余的都是动态显示）

第一种：

第二种：

第三种：

第四种：

第五种：

第六种：

第七种：

第八种：

分析：

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类型，更新完毕后所要执行的方法。你可以把进度关闭和一些关闭进度条后的一些业务放到该函数中。

注：由于本人能力有限，如果有愿意更深理解相关知识，可以进入官网Api进行学习。

在线api

fubo1990

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
（五）ExtJs进度条的几种实现方式

1.今天我们学习ExtJs进度条的实现，我们共介绍8种方式进行实现。2.我们首先看一下代码和实现的效果，然后进行分析。 extShowProgress.html --> /*1.使用MessageBox.wait()方法实现进度条*/ fun
复制链接

扫一扫