实用ExtJS教程100例-003:进度条对话框Ext.MessageBox.progress
2013-11-30 07:26
267 查看
在上一篇内容中我们介绍了三种常用的MessageBox提示框,在这篇文章中,我们将演示如何在对话框中使用进度条。
在上面的代码中,我们使用Ext.MessageBox.progress方法显示一个带有进度条的对话框,这个方法有三个参数:
第一个参数是标题
第二个参数是内容
第三个参数是进度条显示的文字
运行代码可以看到如下界面【查看在线示例】:
在段代码中,我首先定义了一个updateProgress的方法,在这个方法中,判断如果参数progress大于等于1,说明已经完成了,那么调用Ext.MessageBox.updateProgress方法来更新进度。
Ext.MessageBox.updateProgress方法接收两个参数:
第一个参数为进度数值,值的范围在0到1之间。
第二个参数为进度条显示的文字
在updateProgress方法中,我使用了Ext.defer方法来执行定时的操作。
Ext.defer 有两个参数:
第一个参数为定时完成以后执行的方法
第二个参数为时间长度
我在定时代码中执行了updateProgress方法本身,在进度上加0.1,用来继续更新进度。
我们在创建进度条对话框的时候调用这个方法:
程序运行后的截图如下【查看在线示例】:
当进度完成以后:
如果觉得这样太突然,可以使用上面的defer方法做一个简单的延时:
在200毫秒之后,进度条对话框将关闭。
本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作。
进度条对话框
我们可以使用下面的代码来在MessageBox中显示一个进度条:Ext.get("btn4").on("click", function () { Ext.MessageBox.progress("进度", "正在处理,请稍候...", "0%"); });
在上面的代码中,我们使用Ext.MessageBox.progress方法显示一个带有进度条的对话框,这个方法有三个参数:
第一个参数是标题
第二个参数是内容
第三个参数是进度条显示的文字
运行代码可以看到如下界面【查看在线示例】:
让进度条动起来
上面的代码只是在MessageBox中显示了一个进度条,并没有为进度条更新进度,接下来我们来更新进度状态,让进度条能够动起来。var updateProgress = function (progress) { if (progress >= 1) { Ext.MessageBox.updateProgress(1, "处理完成"); return; } Ext.MessageBox.updateProgress(progress, Math.round(progress * 100) + "%"); Ext.defer(function () { updateProgress(progress + 0.1); }, 500); }
在段代码中,我首先定义了一个updateProgress的方法,在这个方法中,判断如果参数progress大于等于1,说明已经完成了,那么调用Ext.MessageBox.updateProgress方法来更新进度。
Ext.MessageBox.updateProgress方法接收两个参数:
第一个参数为进度数值,值的范围在0到1之间。
第二个参数为进度条显示的文字
在updateProgress方法中,我使用了Ext.defer方法来执行定时的操作。
Ext.defer 有两个参数:
第一个参数为定时完成以后执行的方法
第二个参数为时间长度
我在定时代码中执行了updateProgress方法本身,在进度上加0.1,用来继续更新进度。
我们在创建进度条对话框的时候调用这个方法:
Ext.get("btn4").on("click", function () { Ext.MessageBox.progress("进度", "正在处理,请稍候...", "0%"); updateProgress(0); });
程序运行后的截图如下【查看在线示例】:
当进度完成以后:
关闭进度条对话框
在进度执行完成以后,我们可以使用下面的代码来关闭ExtJS 进度条对话框:Ext.MessageBox.close();
如果觉得这样太突然,可以使用上面的defer方法做一个简单的延时:
Ext.defer(function () { Ext.MessageBox.close(); }, 200);
在200毫秒之后,进度条对话框将关闭。
本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作。
相关文章推荐
- 实用ExtJS教程100例-005:自定义对话框Ext.MessageBox.show
- 实用ExtJS教程100例-004:等待对话框Ext.MessageBox.wait
- 实用ExtJS教程100例-002:MessageBox的三种用法
- Extjs Ext.MessageBox.confirm 确认对话框详解
- 实用ExtJS教程100例-007:ExtJS中Window组件最小化
- Ext教程连载 - MessageBox对话框
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- (8) Extjs4.2 等待对话框Ext.MessageBox.wait 自定义对话框Ext.MessageBox.show
- ExtJS2.0实用简明教程——对话框
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- 实用ExtJS教程100例-008:使用iframe填充ExtJS Window组件
- 实用ExtJS教程100例-001:开天辟地的Hello World
- 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传
- ExtJS 2.0实用简明教程 之Ext类库简介
- ExtJs2.0学习教程--Ext.MessageBox
- ExtJS2.0实用简明教程——Ext类库简介
- Extjs Ext.MessageBox.confirm 确认对话框详解
- ExtJS2.0实用简明教程 - Ext类库简介