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