学习EXTJS6(5)基本功能-进度条组件
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也没有看到效果。有时间再体会。
分类:
EXTJS
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报