在上一篇内容中我们介绍了三种常用的MessageBox提示框,在这篇文章中,我们将演示如何在对话框中使用进度条。
进度条对话框
我们可以使用下面的代码来在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毫秒之后,进度条对话框将关闭。