<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
Ext js 的几种进度条（转）
原文地址：https://www.cnblogs.com/zeng-qh/p/9885049.html