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）基本功能-进度条组件
原文地址：http://www.cnblogs.com/usegear/p/7741995.html