EXT_进度条组件_Ext.ProgressBar
进度条组件常用配置：
/* 常用配置项表: applyTo String 页面上已存在元素或元素id,组建追加到该元素后 renderTo String 页面上已存在元素或元素id,该元素将成为新组件容器 text String 进度条上文字 height Number 组件高，默认auto width Number 组件宽，默认auto cls String 可选样式表扩展，用于用户自定义样式，默认空 */
注：通过applyTo为进度条定位div，table可作为目标对象，tr,td不可！
通过renderTo为进度条定位div,td可作为目标对象，table,tr不可！
applyTo优先于renderTo
1.手工模式进度条
<mce:script type="text/javascript"><!-- /* 手工模式进度条调用方式： updateProgress([Float value],[String text]) value:0-1间数字 text:进度条上显示文字 */ /*手动模式进度条*/ 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:1000 } Ext.TaskMgr.start(config); } // --></mce:script>
<a href="javascript:handMoveProgress();" mce_href="javascript:handMoveProgress();">手工模式进度条(适合可以掌握执行状态)</a> <div id="handProgressBar">handMoveProgress</div>
2.自动模式进度条
<mce:script type="text/javascript"><!-- /* 自动模式进度条调用方式： wait([Object config]) 配置项： duration Number 设定进度条被重置前要运行的时间长度,忽略持续显示，至调用reset方法 interval Number 跟新进度条的时间间隔 increment Number 进度条分多少次跟新完，默认10次 fn Function 进度条跟新完后回调函数，无参数，当duration不存在，回调函数忽略 scope Object 回调函数执行范围 */ /*自动模式进度条*/ 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); } // --></mce:script>
<a href="javascript:autoProgress();" mce_href="javascript:autoProgress();">自动模式进度条(适合无法准确掌握时间)</a> <div id="autoProgressBar">autoProgress</div>
3.自定义进度条样式
<mce:style type="text/css"><!-- /*自定义进度条样式*/ .custom .x-progress-inner{ height:17px; background:#fff; } .custom .x-progress-bar{ height:15px; background:transparent url(../extjs2.0/resources/images/custom_bar_green.jpg) repeat-x 0 0; border-top:1px solid #bebebe; border-bottom:1px solid #efefef; } --></mce:style>
<mce:script type="text/javascript"><!-- /*自定义进度条样式*/ function customAutoProgress() { var config = { text:'working...', width:300, renderTo:'customAutoProgressBar', cls:'custom' //指定自定义样式名 } var progressBar = new Ext.ProgressBar(config); config = { duration:10000, interval:1000, increment:11, fn:function(){ progressBar.hide(); Ext.MessageBox.alert('提示','更新完毕！'); } } progressBar.wait(config); } // --></mce:script>