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

Posted 2020-10-12 USEGEAR

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习EXTJS6基本功能-进度条组件相关的知识，希望对你有一定的参考价值。

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也没有看到效果。有时间再体会。

以上是关于学习EXTJS6基本功能-进度条组件的主要内容，如果未能解决你的问题，请参考以下文章

学习进度条

学习进度条第十二周

第 11 章进度条媒体对象和 Well 组件

活动到片段方法调用带有进度条的线程

鸿蒙开发（13）---ProgressBar与RoundProgressBar组件

学习进度条十一(第12周)