Ext.ProgressBar范例

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>