updateProgress更新进度条及提示信息

最新推荐文章于 2024-09-20 10:30:16 发布

原创最新推荐文章于 2024-09-20 10:30:16 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #JavaScript #CSS #ViewUI

ExtJS 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何使用ExtJS实现一个动态更新的进度条和信息文字对话框。通过Ext.MessageBox.show方法创建一个带有进度条的消息框，并利用Ext.TaskMgr.start启动定时任务来更新进度条的值和消息内容。

<!-- 导入extjs配置 … ... -->
	<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="./../ext/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			/**
				updateProgress(Number value,String progressText,String msg)
				该方法在peogress:true的情况下会生效
				value:0——1之间的数字默认为0
				progressText:进度条上显示的文字
				msg：显示的内容
			
			*/
			var msgBox = Ext.MessageBox.show({
				title: '提示',
				msg: '动态更新的进度条和信息文字',
				modal:true,
				width: 300,
				progress:true
			});
			var count = 0;//滚动条被刷新的次数
			var percentage = 0;//进度百分比
			var progressText = "";//进度条信息
			Ext.TaskMgr.start({
				run:function(){
					count++;
					if(count > 10){
						msgBox.hide();
					}
					//计算进度
					percentage = count/10;
					//生成进度条文字
					progressText = '当前完成度：'+percentage*100+"%";
					//更新信息提示对话框
					msgBox.updateProgress(percentage,progressText,'当前时间：'+
										  new Date().format('Y-m-d g:i:s A'));
					
				},
				interval:1000
			});
		});
	</script>