1.手工模式：
progressbar.js:
1 Ext.onReady(function(){ 2 //手动 3 var config = { 4 text: '请稍后...', 5 '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>
主要是定义的样式起了作用