Extjs 进度条的应用【转】
目标:
了解Extjs中进度条的呈现方式
理解Extjs中进度条的应用范围
内容:
Ext.MessageBox.show()中的进度条的使用
首先必须知道例外两个方法 Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数,看名字就知道意思),
注意value为0-1之间的数,表示进度条的进度.
第一种:(通过进度的大小控制进度,满进度为1)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 }
第二种:(通过固定时间控制进度加载)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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{"加载完后触发方法"}}