USEGEAR

导航

学习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>
自动进度条

<!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>
 <script type="text/javascript">  
 function handMoveProgress()  
{  
    var config = {  
        text:'working...',  
        width:300,  
        renderTo:'handProgressBar'  
    }  
      
    var progressBar = new Ext.ProgressBar(config);  
      
    var count = 0;  
    var percentage = 0;  
    var progressText = '';  
      
    config = {  
        run:function(){  
            count++;  
              
            if(count > 10)  
            {  
                progressBar.hide();  
                Ext.TaskMgr.stopAll();    //终止定时调用^-^  
                return;  
            }  
              
            percentage = count/10;  
            progressText = percentage*100 + '%';  
              
            progressBar.updateProgress(percentage,progressText);  
        },  
        interval:5000  
    }  
      
    Ext.TaskMgr.start(config);  
}
 
</script>
   </head>
   <body>
 <a href="javascript:handMoveProgress();" mce_href="javascript:onReady();">手工模式进度条(适合可以掌握执行状态)</a>  
<div id="handProgressBar">handMoveProgress</div> 
        </body>
</html>
手动进度条

书上的没有调试通，查看网上demo，tmd也没有看到效果。有时间再体会。

 

posted on 2017-11-01 11:09  USEGEAR  阅读(954)  评论(0)  编辑  收藏  举报