ExtJs--03--几个进度条代码，可以看看

最新推荐文章于 2016-03-19 18:33:00 发布

南京煜之隆

最新推荐文章于 2016-03-19 18:33:00 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJs 文章标签： extjs4 进度条

本文链接：https://blog.youkuaiyun.com/responsecool/article/details/40950713

ExtJs 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了使用ExtJS实现不同场景下进度条的多种方法，包括通过定时器更新进度条状态、显示进度文本等，展示了如何创建动态更新的进度条及信息提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
 * 
 
//通过固定时间完成进度条，即：伪进度条
 Ext.onReady(function () {
            var progressBar = Ext.Msg.show({ title: "进度条",
                msg: "通过固定时间完成进度",
                width: 300,
                wait: true,
                waitConfig: { interval: 500, duration: 5000, fn: function () { Ext.Msg.hide(); } },
                closable: false
            });
        });
 */


/*
 * 
 //进度条
 //updateProgress( Number value, String progressText, String msg ) 
 参数说明：
 value : Number   0和1之间的任何数 (默认0)
 progressText : String    进度条里面的显示内容 (默认'')
 msg : String     消息框主体内容被指定的消息代替 (默认没有定义)
 
 Ext.onReady(function(){
	var configs = {
		title:"安装进度条",
		progress:true,
		width:600,
		closable:false,
		msg:"正在安装 ... "
	};
	
	Ext.Msg.show(configs);
	
	var fn_progressbar = function(v){
		return function(){
			if(v==12){
				Ext.Msg.hide();
			}else{
				var i = v/11;
				Ext.Msg.updateProgress(i,Math.round(i*100)+"%已完成！",i);
			}
		}
	}
	
	for(var i = 1 ; i < 13 ; i ++){
		setTimeout(fn_progressbar(i),i*500);
	}
});*/

/*
 * 
Ext.onReady(function(){    
    var msgBox = Ext.MessageBox.show({    
        title:'提示',    
        msg:'动态更新的进度条和信息文字',    
        modal:true,    
        width:300,    
        progress:true   
    })    
   
    var count = 0;//滚动条被刷新的次数    
    var percentage = 0;//进度百分比    
    var progressText = '';//进度条信息    
   
    var task = {    
        run:function(){    
            count++;    
            //计算进度    
            percentage = count/10;    
            //生成进度条文字    
            progressText = '当前完成度:'+percentage*100+"%";    
            //更新信息提示对话框    
            msgBox.updateProgress(percentage,progressText,'当前时间:'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));    
            //刷新10次后关闭信息提示框    
            if (count>10)    
            {    
                Ext.TaskManager.stop(task);    
                msgBox.hide();    
            }    
        },    
        interval:1000    
    }    
    Ext.TaskManager.start(task);    
});    

*/

Ext.onReady(function(){

	Ext.MessageBox.progress("请等待", "数据处理进度...");
	var fun = function(p) {
		return function() {
			if (p == 20) {
				Ext.MessageBox.hide();
			} else {
				Ext.MessageBox.updateProgress(p / 20, '正在处理第' + p + '个，一共20个');
			}
		};
	}
	for ( var i = 1; i <= 20; i++) {
		setTimeout(fun(i), i * 1000);
	}
});

<pre name="code" class="javascript">Ext.onReady(function(){
	var configs = {
		title:"数据加载进度情况",
		msg:"正在处理数据...",
		animate:true,
		width:500,
		progress:true,
		closable:false,
		fn:function(){
			Ext.Msg.alert("标题信息","提示用户信息内容");
		}
	};
	
	Ext.Msg.show(configs);
	
	var fn_progressbar = function(v){
		return function(){
			if(v==99){
				Ext.Msg.hide();
				Ext.Msg.alert("提示信息","我们继续漫游吗？");
			}else{
				var i = v/98;
				Ext.Msg.updateProgress(i,"已完成"+Math.round(i*100)+"%！");
			}
		}
	}
	
	for(var i = 1 ; i < 100 ; i ++){
		setTimeout(fn_progressbar(i),i*100);
	}
});