通过上面三篇内容的演示，相信你已经基本上了解了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

运行我们的示例，效果图如下

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

自定义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);});