Ext.ProgressBar实例

1、

 

<script type="text/javascript">
  		Ext.onReady(function(){
  			Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
  			var msgBox = Ext.MessageBox.show({
  				title:'进度提示',
  				msg:'',
  				modal:true,
  				progress:true,
  				width:400
  			});
  			
  			//滚动条被刷新的次数
  			var count = 0;
  			//进度百分比
  			var percentage = 0;
  			//进度条信息
  			var processText = '';
  			
  			Ext.TaskMgr.start({
  				run:function(){
  					count++;
  					//刷新10次后关闭进度条
  					if(count>10){
  						msgBox.hide();
  					}
  					//计算进度
  					percentage = count/10;
  					//显示内容
  					processText = '当前进度:'+percentage*100+'%';
  					//更新进度条
  					msgBox.updateProgress(percentage,processText,'<font color="red">这是通过动态更新内容形成的进度条</font>');
  				},
  				interval:1000	//每秒更新
  			});
  			
  			
		});
  	</script>

 

 

2、

 

<script type="text/javascript">
  		Ext.onReady(function(){
  			Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
  			var progressBar = new Ext.ProgressBar({
  				renderTo:'progressbar',
  				width:400
  			});
  			
  			//滚动条被刷新的次数
  			var count = 0;
  			//进度百分比
  			var percentage = 0;
  			//进度条信息
  			var processText = '';
  			
  			Ext.TaskMgr.start({
  				run:function(){
  					count++;
  					//刷新10次后关闭进度条
  					if(count>10){
  						progressBar.hide();
  					}
  					//计算进度
  					percentage = count/10;
  					//显示内容
  					processText = '<font color="green">'+percentage*100+'%</font>';
  					//更新进度条
  					progressBar.updateProgress(percentage,processText);
  				},
  				interval:1000	//每秒更新
  			});
  			
  			
		});
  	</script>

 

 

 

3、

 

<script type="text/javascript">
  		Ext.onReady(function(){
  			Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
  			var progressBar = new Ext.ProgressBar({
  				renderTo:'progressbar',
  				width:400
  			});
  			
  			//初始化一个自动更新的进度条
  			progressBar.wait({
  				duration:9000,//进度条运作时间的长度,单位是毫秒
  				interval:1000,//每次更新的间隔周期(默认为1000毫秒)
  				increment:10,//进度条每次更新的幅度大小(默认为10)。如果进度条达到最后,那么它会回到原点。
  				scope:this,//回调函数的作用域
  				fn:function(){ //回调函数
  					alert("更新完成");
  					progressBar.hide();
  				}
  			});
		});
  	</script>

 

 

 

4、

 

<style type="text/css">
	
		.progressBar{
			border: 0;
		}
		.progressBar .x-progress-inner{
			height: 16px;
			background: white;
		}
		
		.progressBar .x-progress-bar{
			height: 15px;
			background: transparent url(images/custom-bar-green.gif) repeat-x 0 0;
			border-top:0;
			border-bottom:0;
			border-right: 0;
		}
	</style>

 

<script type="text/javascript">
  		Ext.onReady(function(){
  			Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
  			var progressBar = new Ext.ProgressBar({
  				renderTo:'progressbar',
  				width:400,
  				cls:'progressBar'
  			});
  			
  			//初始化一个自动更新的进度条
  			progressBar.wait({
  				duration:9000,//进度条运作时间的长度,单位是毫秒
  				interval:1000,//每次更新的间隔周期(默认为1000毫秒)
  				increment:10,//进度条每次更新的幅度大小(默认为10)。如果进度条达到最后,那么它会回到原点。
  				scope:this,//回调函数的作用域
  				fn:function(){ //回调函数
  					alert("更新完成");
  					progressBar.hide();
  				}
  			});
		});
  	</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值