Ext.ProgressBar的使用

最新推荐文章于 2021-01-14 04:33:28 发布

原创最新推荐文章于 2021-01-14 04:33:28 发布 · 420 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#EXT #配置管理

ExtJS_3.0 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了ExtJS中两种进度条的应用案例：一种是通过手工更新进度的方式展示任务执行状态；另一种则是设置自动更新进度条直至完成，并在完成后触发回调函数。

1、手工模式的进度条
      调用格式：updateProgress([Float value], [String text])
      参数说明：
            value：0~1之间的数字，默认为0。
            text：进度条上显示的文字。
      范例：

Ext.onReady(function(){
	var obj = new Ext.ProgressBar({
		text: "working...",
		width: 300,
		renderTo: "div1" 
	});
	
	var count = 0; //刷新次数
	var per = 0; //进度百分比
	var progressText = ""; //进度条信息
	
	//任务管理器
	Ext.TaskMgr.start({
		run: function(){
			count++;
			if(count>10){
				//obj.hide(); //隐藏
				//Ext.TaskMgr.stop(this); //停止任务
				count = 0;
			}
			per = count/10;
			progressText = per*100 + "%";
			obj.updateProgress(per, progressText);
		},
		interval: 1000
	});
});

2、自动模式的进度条
      调用格式：wait([Object config])
      参数说明：
            config：配置对象。相关配置项如下：
                  duration：设定进度条在被重置之前要运行的时间长度，单位为毫秒，如果忽略该项则进度条会持续更新直到调用reset方法。
                  fn：回调函数，在进度条更新完毕后被调用。当duration不存在时会被忽略。
                  interval：更新进度条的时间间隔，单位为毫秒，默认值为1000毫秒。
                  increment：进度条的分段数量，默认为10。
      范例：

Ext.onReady(function(){
	var obj = new Ext.ProgressBar({
		text: "working...",
		width: 300,
		renderTo: "div2"
	});
	
	obj.wait({
		duration: 15000,
		fn: function(){
			alert("执行完毕！");
		},
		interval: 100,
		increment: 150
	});
});