码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-11-01 12:19:41      阅读:342      评论:0      收藏:0      [点我收藏+]

标签:更新   .com   string   nta   config   oct   local   bootstra   splay   

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(5)基本功能-进度条组件

标签:更新   .com   string   nta   config   oct   local   bootstra   splay   

原文地址:http://www.cnblogs.com/usegear/p/7741995.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!