ExtJS 手工模式进度条 & 自定义进度条样式

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_34291004

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量96

点赞数

文章标签： javascript ViewUI

1.手工模式：

progressbar.js:

 1 Ext.onReady(function(){
 2     //手动
 3     var config = {
 4         text: '请稍后...',
 5         width: '300',
 6         renderTo: document.getElementById('progressbar'),
 7         //cls: 'progress-bar'
 8     };
 9     var pBar = new Ext.ProgressBar(config);
10     var count = 0;
11     var percentage = 0;
12     var progressText = '';
13     var cfig = {
14         run: function(){
15             count += 0.5;
16             if(count > 10){
17                 pBar.updateText('完成！');
18                 Ext.TaskManager.stopAll();
19                 return;
20             }
21             percentage = count / 10;
22             progressText = percentage * 100 + '%';
23             pBar.updateProgress(percentage, progressText);
24         },
25         interval : 1000
26     };
27     Ext.TaskManager.start(cfig);
28 });

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

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>helloext.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=gbk">
 6     <link rel="stylesheet" type="text/css" href="../extjs-4.1.1/resources/css/ext-all.css">
 7     <script type="text/javascript" src="../extjs-4.1.1/ext-all.js"></script>
 8     <script type="text/javascript" src="../js/msgbox.js"></script>
 9     <script type="text/javascript" src="../js/progressbar.js"></script>
10     
11     <style type="text/css">
12         body{text-align:center;}
13         div{margin:0 auto;}
14         .progress-bar{border:1;}
15         .progress-bar .x-progress-inner{
16             height:16px;
17             background: red;
18         }
19         .progress-bar .x-progress-bar{
20             background: transparent url(../imgs/favicon.ico) repeat-x 0 0;
21             background-color: #0C6;
22             border-top: 0;
23             border-bottom: 0;
24             border-right: 0;
25         }
26     </style>
27 
28   </head>
29   
30   <body>
31       <br/>
32       <div id="msgbox"></div>
33       <br/>
34       <div id="progressbar" align="left"></div>
35   </body>
36 </html>