Extjs 进度条的应用【转】

最新推荐文章于 2017-05-22 16:56:41 发布

转载最新推荐文章于 2017-05-22 16:56:41 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wzlmzy/archive/2012/04/25/2470235.html

文章标签：

#json

本文介绍了Extjs中两种实现进度条的方式：一种是基于进度值动态更新进度条，另一种是通过固定时间间隔自动完成进度加载。同时展示了如何利用Ext.MessageBox.show()及Ext.TaskMgr.start()等API实现这些功能。

目标：

了解Extjs中进度条的呈现方式

理解Extjs中进度条的应用范围

内容：

       Ext.MessageBox.show()中的进度条的使用
   首先必须知道例外两个方法 Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数，看名字就知道意思)，
   注意value为0-1之间的数，表示进度条的进度.
   第一种：（通过进度的大小控制进度，满进度为1）

代码

1 function Read4() {
2 var progressBar=Ext.Msg.show({
3 title:"标题",
4 msg:"通过进度的大小来控制进度",
5 progress:true,
6 width:300
7 });
8 var count=0;
9 var bartext="";
10 var curnum=0;
11 Ext.TaskMgr.start({
12 run:function () {
13 count++;
14 if (count>=10) {
15 progressBar.hide();
16 }
17 curnum=count/10;
18 bartext=curnum*100+"%";
19 progressBar.updateProgress(curnum,bartext);
20 },
21 interval:1000
22 })
23 }

第二种：（通过固定时间控制进度加载）

代码

1 function Read5() {
2 var progressBar=Ext.Msg.show({
3 title:"标题",
4 msg:"通过固定时间完成进度",
5 width:300,
6 wait:true,
7 waitConfig:{interval:500,duration:5000,fn:function () {
8 Ext.Msg.hide();
9 }},
10 closable:true
11 });
12 // setTimeout(function () {
13 // Ext.Msg.hide();
14 // },5000);
15 }

查看效果：

动态更新进度信息

本课总结：

实现进度条的方法有很多种：

Ext.msg.wait(“内容”，“标题”,"json配置项显示内容")，{text:"正在加载中......"}

Ext.msg.show(),其中此方法来实现进度条也有很多种表现方式:wait,progress设置为true都可以显示进度条

实现动态加载进度条的方法:

            Ext.TaskMgr.start({
            run:function () {
                count++;
                if (count>=10) {
                    progressBar.hide();
                }
                curnum=count/10;
                bartext=curnum*100+"%";
                progressBar.updateProgress(curnum,bartext);
            },
            interval:1000
            })

setTimeout(fn,countTime)

Ext.msg.show()中的waitconfig:{interval:500,duration:5000,fn:function{"加载完后触发方法"}}

转载于:https://www.cnblogs.com/wzlmzy/archive/2012/04/25/2470235.html