實用ExtJS教程100例-005：自定義對話框Ext.MessageBox.show

 

通過上面三篇內容的演示，相信你已經基本上了解了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);
});