实用ExtJS教程100例-003：进度条对话框Ext.MessageBox.progress

在这篇文章中，我们将演示如何在对话框中使用进度条。

进度条对话框

我们可以使用下面的代码来在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毫秒之后，进度条对话框将关闭。