大家好，又见面了，我是你们的朋友全栈君。
在上一篇内容中我们介绍了三种常用的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毫秒之后，进度条对话框将关闭。
本文转自齐师傅博客园博客，原文链接：http://www.cnblogs.com/youring2/p/extjs-100-examples-003-messagebox-with-progressbar.html，如需转载请自行联系原作者
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/151115.html原文链接：https://javaforall.net
