学习EXTJS6（5）基本功能-进度条组件

Ext.ProgressBar有二种模式：手动和自动；
手动：自己控制显示、进度、更新、清除。自动只需要调用Wait方法即可。

配置项：


配置项	类型	说明
renderTo	String	指定页面上已经存在的元素or元素id，该元素成为新组件的容器
height	Number
width	Bunber
cls	String	一个可选的样式表扩展常用于自定义式样。默认是空

<!DOCTYPE html>
<html>
   <head>
    <meta http-equiv="Content-Type"  content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../../study/EXTJS/ext-4.2.1.883/resources/css/ext-all.css" />
    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/bootstrap.js"></script>
    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>

   </head>
   <body>
    <script type="text/javascript">  
function autoProgress()  
{  
    var config = {  
        text:'working...',  
        width:300,  
        renderTo:'autoProgressBar'  
    }  
      
    var progressBar = new Ext.ProgressBar(config);  
      
    config = {  
        duration:10000,          //进度条将持续显示10s  
        interval:1000,           //进度条将每1s更新一次  
        increment:11,            //进度条分11次更新完毕  
        scope:this,             //回调函数执行范围  
        fn:function(){         //跟新完毕后调用回调函数  
            progressBar.hide();  
            Ext.MessageBox.alert('提示','跟新完毕！');  
            //alert("更新完毕！");  
        }  
    }  
      
    progressBar.wait(config);  
 
</script>
<a href="javascript:autoProgress();" mce_href="javascript:autoProgress();">自动模式进度条(适合无法准确掌握时间)</a>  
<div id="autoProgressBar">autoProgress</div> 
        </body>
</html>

自动进度条