当前位置: 代码迷 >> Web前端 >> Ext.ProgressBar的运用
  详细解决方案

Ext.ProgressBar的运用

热度:169   发布时间:2012-11-16 14:12:15.0
Ext.ProgressBar的使用

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
	});
});

?

  相关解决方案