(8) Extjs4.2 等待对话框Ext.MessageBox.wait 自定义对话框Ext.MessageBox.show

在前面，我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框。我们来看看ExtJS中的等待对话框。

首先来看一个简单的例子【查看在线示例】：



这种对话框会一直滚动，直到被关闭。我们看一下它的创建代码：

Ext.get("btn5").on("click", function () {
    Ext.MessageBox.wait("正在处理，请稍候...", "等待");
    Ext.defer(function () {
        Ext.MessageBox.close();
    }, 3000);
});

在这段代码中，首先使用Ext.MessageBox.wait()方法创建一个等待对话框，这个方法接收三个参数（我们在这里只传递了两个）：

第一个参数是显示的内容
第二个参数是标题
第三个参数是进度条的配置项（我们在例子中省略了这个参数）

在完成对话框创建之后，我们使用定时方法，在3秒以后将这个对话框关闭。

与进度条对话框的区别

从效果上看，等待对话框与进度条对话框非常相似，那么我们什么时候使用等待对话框，什么时候使用进度条对话框呢？

如果你明白了他们之间的区别，在使用的时候就非常方便取舍了。

进度条对话框中显示的进度是需要我们控制的，也就是说，如果你知道一件事情的处理进度，并能够及时的更新进度条，那么建议使用进度条对话框。

如果说你要处理一个事情，但是不知道处理时间，这是我们就会用到等待对话框了，等待对话框中的进度条会一直循环，直到我们处理完成后将它关闭掉。

--------------------------------------------------------------------------------------------------------

我们对ExtJS对话框进行了三篇演示：

MessageBox的三种用法
进度条对话框Ext.MessageBox.progress
等待对话框Ext.MessageBox.wait

通过上面三篇内容的演示，相信你已经基本上了解了ExtJS的基本样式，这篇文章将演示如何使用自定义ExtJS对话框。

Ext.MessageBox.show演示

要显示自定义的对话框，我们需要用到Ext.MessageBox.show方法。先来看一个简单的例子：

Ext.get("btn1").on("click", function () {
    Ext.MessageBox.show({
        title: "地址",
        msg: "请输入您的详细地址：",
        width: 300,
        buttons: Ext.MessageBox.OKCANCEL,
        multiline: true,
        fn: saveAddress,
        animateTarget: "btn1",
        icon: Ext.MessageBox.INFO
    });
});

function saveAddress(btnId, text) {
    if (btnId == "ok") {
        alert(text);
    }
    else {
        //其它的处理代码
    }
}

看到了吧，Ext.MessageBox.show方法的参数是一个配置对象，配置中有title、msg、width、buttons等配置项，用来决定对话框的显示内容。

这些配置项的说明如下：

title：标题
msg：内容
width：对话框窗口的宽度
buttons：对话框底部显示的按钮，它可以是下面的枚举值：

Ext.MessageBox.OK
Ext.MessageBox.YES
Ext.MessageBox.NO
Ext.MessageBox.CANCEL

或者可以是一些按钮组合：

Ext.MessageBox.OKCANCEL
Ext.MessageBox.YESNO
Ext.MessageBox.YESNOCANCEL

multiline：为true的时候显示一个多行的输入框，默认为false
fn：回调函数，它接收三个参数：

buttonId：用户点击的按钮的id，如果是OK按，就是小写的ok。由于有四种按钮，所以它的值可以是：ok、no、yes、cancel
text：在有文本框的对话框中，text为用户输入的值
opt：传递给show方法的配置项

animateTarget：显示打开/关闭动画时候的目标元素，可以是元素id或Ext.dom.Element对象
icon：对话框中显示的图标，它的可用项有：

Ext.MessageBox.INFO
Ext.MessageBox.WARNING
Ext.MessageBox.QUESTION
Ext.MessageBox.ERROR

运行我们的示例，效果图如下【ExtJS自定义对话框在线示例，包含广告】：



我们可以使用自定义对话框显示之前所有的效果。

自定义alert

Ext.get("btn2").on("click", function () {
    Ext.MessageBox.show({
        title: "提示",
        msg: "您点击了按钮",
        buttons: Ext.MessageBox.OK
    });
});

自定义confirm

Ext.get("btn3").on("click", function () {
    Ext.MessageBox.show({
        title: "提示",
        msg: "确定删除吗？",
        buttons: Ext.MessageBox.OKCANCEL,
        fn: function (btnId) {
            if (btnId == "ok") {
                alert("点击了确定按钮");
            }
            else {

            }
        }
    });
});

自定义进度条对话框

Ext.get("btn4").on("click", function () {
    Ext.MessageBox.show({
        title: "进度条对话框",
        msg: "正在处理，请稍候...",
        progress: true
    });
    updateProgress(0);
});

我们的updateProgress()方法仍然使用ExtJS进度条对话框示例中的方法。

自定义等待对话框

Ext.get("btn5").on("click", function () {
    Ext.MessageBox.show({
        title: "等待对话框",
        msg: "正在处理，请稍候...",
        wait: true
    });
    Ext.defer(function () { Ext.MessageBox.close(); }, 3000);
});