Extjs updateProgress进度条的应用

Extjs updateProgress进度条的应用

用法概念

updateProgress( Number value, String progressText, String msg ) : Ext.MessageBox

更新一个进程样式的消息框的内容和进度条.只有相关的消息框通过Ext.MessageBox.progress创建的或者调用了Ext.MessageBox.show方法的进程: true.

参数:

value : Number

01之间的任何数 (默认0)

progressText : String

进度条里面的显示内容 (默认'')

msg : String

消息框主体内容被指定的消息代替 (默认没有定义)

Returns:

Ext.MessageBox

实例一

  •  
  • JScript 代码   复制
  • 
    <script type="text/javascript">    
    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);    
    });    
    </script>   
    
    		
  • 效果图:

    实例二

  •  
  • JScript 代码   复制
  • 
    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);
                }
    		
  • 效果图: