Extjs updateProgress进度条的应用
Extjs updateProgress进度条的应用
用法概念
updateProgress( Number value, String progressText, String msg ) : Ext.MessageBox
更新一个进程样式的消息框的内容和进度条.只有相关的消息框通过Ext.MessageBox.progress创建的或者调用了Ext.MessageBox.show方法的进程: true.
参数:
value : Number
0和1之间的任何数 (默认0)
progressText : String
进度条里面的显示内容 (默认'')
msg : String
消息框主体内容被指定的消息代替 (默认没有定义)
Returns:
Ext.MessageBox
实例一
<script type="text/javascript">
Ext.onReady(function(){
var msgBox = Ext.MessageBox.show({
title:'提示',
msg:'动态更新的进度条和信息文字',
modal:true,
width:300,
progress:true
})
var count = 0;//滚动条被刷新的次数
var percentage = 0;//进度百分比
var progressText = '';//进度条信息
var task = {
run:function(){
count++;
//计算进度
percentage = count/10;
//生成进度条文字
progressText = '当前完成度:'+percentage*100+"%";
//更新信息提示对话框
msgBox.updateProgress(percentage,progressText,'当前时间:'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
//刷新10次后关闭信息提示框
if (count>10)
{
Ext.TaskManager.stop(task);
msgBox.hide();
}
},
interval:1000
}
Ext.TaskManager.start(task);
});
</script>
效果图:
实例二
Ext.MessageBox.progress("请等待", "数据处理进度...");
var fun = function (p) {
return function () {
if (p == 20) {
Ext.MessageBox.hide();
} else {
Ext.MessageBox.updateProgress(p / 20, '正在处理第' + p + '个,一共20个');
}
};
}
for (var i = 1; i <= 20; i++) {
setTimeout(fun(i), i * 1000);
}
效果图: