學習EXTJS6（5）基本功能-進度條組件
阿新 • • 發佈：2017-11-01
提示 progress 技術分享 string this 自己 meta work mce
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"> functionautoProgress() { 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）基本功能-進度條組件