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

最新推荐文章于 2021-01-14 04:33:28 发布

weixin_30547797

最新推荐文章于 2021-01-14 04:33:28 发布

阅读量152

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/usegear/p/7741995.html

版权

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>