<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