ExtJS之Progressbar进度条的手动模式和自动模式。
来源:互联网 发布:ubuntu运行loic.exe 编辑:程序博客网 时间:2024/05/01 01:29
主要介绍EXTJS中常用的进度条的两种基本实现。
手动模式和自动模式。
A:手动模式:
手工更新进度条主要是通过调用进度条updateProgress方法结合周期性定时方法调用来实现progress动态更新。
调用格式:
updateProgress([Float value], [String text], [Boolean animate])value: 默认为0,超过1,进度条也不会重新开始。text : 进度条上显示地文字animate :是否使用动画效果,默认为false返回值: Ext.ProgressBar结合具体的例子:
<script type="text/javascript">Ext.onReady(function(){var msgBox = Ext.MessageBox.show({ title : 'tip', msg : 'Dynamic updating progress and information..', modal: true, width : 300, progress : true});var count = 0;var percentage = 0;var progressText = '';var task = { run : function(){ count++; percentage = count / 10; //generator the information of progress bar progressText = 'current finished :' + percentage * 100+'%'; msgBox.updateProgress(percentage,progressText,'the current time: ' + Ext.util.Format.date(new Date(),'Y-m-d g:i:s')); //refresh ten times will close the progress. if(count > 10){ Ext.TaskManager.stop(task); msgBox.hide();//hide the MessageBox } }, interval : 1000 //controller the event interval}Ext.TaskManager.start(task);});</script>
B:自动模式
自动模式的进度条其实也不能准确反映程序的执行状态,主要是给用于提供一个友好的提示,表示正在执行一个耗时的操作。主要是用到wait方法,进行一些必要的配置就可以得到一个比较理想的自动更新的进度条了。
调用格式:wait([Object config])config : 是一个自动更新进度条的配置对象。包含了有用的配置参数。
duration Number 设定进度条在被重置之前要运行的时间长度,单位毫秒。
interval Number 设定更新进度条的时间间隔,单位毫秒。默认是1000毫秒。
increment Number 设定进度条的分段数量,也就是进度条分多少次完成更新。默认为10次。实际次数超过之后会重置。
text string 设定进度条上显示地文字。
fn Function 设定在进度条更新完毕之后被调用,该回调函数没有参数。
Ext.onReady(function(){ var progressBar = new Ext.ProgressBar({ text :'do something..',//进度条上显示地文字 width : 300,//设置进度条的宽度 renderTo: 'ProgressBar'//与renderTo 效果相同,定义HTML标签容器 }); //自动模式调用wait , 上面的手动模式是通过TaskManager来周期调用函数实现的。 progressBar.wait({ duration: 10000,//进度条持续更新10秒钟 interval : 1000,//没1秒更新一次 increment: 10,//进度条分10次更新完毕 text : 'waiting', scope : this, //回调函数执行范围 fn : function(){ alert('更新完毕..'); //更新完毕之后就会调用回调函数 } });});
在上面的手动模式和自动模式中: 手动模式就是主要通过TaskManager的start和stop方法来实现周期性调用updateProgress方法实现。自动模式就是通过wait方法加上config配置参数配置实现改变。其中,进度条还是可以自定义样式,还是有 更多自定义的灵活性。需要根据不同的需求来实现进度条样式。
0 0
- ExtJS之Progressbar进度条的手动模式和自动模式。
- (4)ExtJS之进度条ProgressBar
- Extjs之进度条的控制”
- button和progressbar结合的进度条
- Android的Activity跳转和ProgressBar进度条
- 事件驱动异步模式(BackgroundWorker)ProgressBar设置进度条
- android 之进度条--------progressbar
- Android之进度条ProgressBar
- EasyUI之进度条progressBar
- Android基础-----进度条(ProgressBar手动实现)
- 我的Android进阶之旅------>Android之进度条(ProgressBar)的功能和用法
- progressbar 进度条的使用
- ProgressBar进度条的实现
- EasyUI基础入门之searchbox&progressbar(搜索框和进度条)
- Android 控件之ProgressBar进度条
- Android 控件之ProgressBar进度条
- Android 控件之ProgressBar进度条
- Android 控件之ProgressBar进度条
- python学习(3)函数式编程
- Occupancy
- iOS 防止UITableViewCell快速重复点击多次响应事件
- LaTeX soul包
- 个人部署maven项目
- ExtJS之Progressbar进度条的手动模式和自动模式。
- eclipse+sdk+adk安卓开发环境部署(全程详解,适合小白)
- HDU 2084 数塔(DP)
- java并发编程lock
- Simultaneous Localization and Mapping (SLAM)讲义1
- 遍历PB的TreeView的函数(转)
- bzoj2822: [AHOI2012]树屋阶梯
- 算法学习总结
- MYSQL性能调优: 对聚簇索引和非聚簇索引的认识