ExtJS 进度条样式设置

最新推荐文章于 2019-06-26 16:56:52 发布

软件-攻城狮

最新推荐文章于 2019-06-26 16:56:52 发布

阅读量715

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/smshuxue/article/details/35812363

版权

JavaScript 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

progressbar.js:

Ext.onReady(function(){
    //手动
    var config = {
        text: '请稍后...',
        width: '300',
        renderTo: document.getElementById('progressbar'),
        //cls: 'progress-bar'
    };
    var pBar = new Ext.ProgressBar(config);
    var count = 0;
    var percentage = 0;
    var progressText = '';
    var cfig = {
        run: function(){
            count += 0.5;
            if(count > 10){
                pBar.updateText('完成！');
                Ext.TaskManager.stopAll();
                return;
            }
            percentage = count / 10;
            progressText = percentage * 100 + '%';
            pBar.updateProgress(percentage, progressText);
        },
        interval : 1000
    };
    Ext.TaskManager.start(cfig);
});

2.自定义模式只需将上面注释的 cls 属性取消注释即可。panel.html代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>helloext.html</title>
    <meta http-equiv="content-type" content="text/html; charset=gbk">
    <link rel="stylesheet" type="text/css" href="../extjs-4.1.1/resources/css/ext-all.css">
    <script type="text/javascript" src="../extjs-4.1.1/ext-all.js"></script>
    <script type="text/javascript" src="../js/msgbox.js"></script>
    <script type="text/javascript" src="../js/progressbar.js"></script>
    
    <style type="text/css">
        body{text-align:center;}
        div{margin:0 auto;}
        .progress-bar{border:1;}
        .progress-bar .x-progress-inner{
            height:16px;
            background: red;
        }
        .progress-bar .x-progress-bar{
            background: transparent url(../imgs/favicon.ico) repeat-x 0 0;
            background-color: #0C6;
            border-top: 0;
            border-bottom: 0;
            border-right: 0;
        }
    </style>

  </head>
  
  <body>
      <br/>
      <div id="msgbox"></div>
      <br/>
      <div id="progressbar" align="left"></div>
  </body>
</html>

软件-攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS 进度条样式设置

progressbar.js:Ext.onReady(function(){ //手动 var config = { text: '请稍后...', width: '300', renderTo: document.getElementById('progressbar'), //cls: 'progress-ba
复制链接

扫一扫