ExtJs4 筆記（6） Ext.MessageBox 消息對話框

本篇演示消息對話框的用法，ExtJs封裝了可能用到的各類消息框，並支持自定義的配置。

如下是用到的html：

[html]

<h1>各種消息框</h1>
<div id="div1" class="content">
<button id="bt1" type="button" >Confirm</button>
<button id="bt2" type="button" >Prompt</button>
<button id="bt3" type="button" >DIY窗口</button>
<button id="bt4" type="button" >進度條</button>
<button id="bt5" type="button" >進度條2</button>
<button id="bt6" type="button" >wait</button>
</div>

一、警告對話框和確認對話框

展示一個帶“是”，“否”按鈕的確認對話框。當單擊按鈕時，執行回調函數，獲取按鈕類型，並彈出一個警告對話框。

[Js]

    Ext.get("bt1").on("click", function () {
        Ext.MessageBox.confirm("標題", "詳細信息內容", function (btn) {
            Ext.Msg.alert("提示", "你點擊了" + btn + "按鈕");
        });
    });

效果展示：

二、輸入對話框

展示一個帶文本框的對話框，可以供用戶錄入。單擊按鈕後可以獲取文本框的內容。

[Js]

    Ext.get("bt2").on("click", function () {
        Ext.MessageBox.prompt(
        "標題",
        "詳細信息內容",
        function (btn, text) {
            Ext.Msg.alert("提示", "你點擊了" + btn + "按鈕,獲取的文本：" + text);
        },
        this,
        true,       //表示文本框爲多行文本框
        "初始文本");
    });

效果展示：

三、自定義DIY對話框

展示一個自定義的對話框，可以定義圖標樣式，按鈕組的類型，是否帶文本框，是否帶進度條等信息。

[Js]

    Ext.get("bt3").on("click", function () {
        Ext.MessageBox.show({
            title: "標題",
            msg: "詳細信息內容",
            buttons: Ext.MessageBox.YESNOCANCEL,    //對話框的按鈕組合
            multiline: false,                       //有文本框時，是否爲多行文本框
            closable: false,                        //是否可關閉
            prompt: true,
            icon: Ext.MessageBox.WARNING,
            iconCls: "add16",
            width: 400,
            proxyDrag: true,
            value: "初始文本",
            progress: true,
            progressText: "加載中..",
            animateTarget: "bt3"
        });
    });

效果展示：

四、加載進度條對話框

展示一個帶加載進度條的對話框，提示當前執行任務的進度信息。

[Js]

    Ext.get('bt4').on('click', function () {
        Ext.MessageBox.show({
            title: '加載窗口',
            msg: '詳細信息內容',
            progressText: '加載中...',
            width: 300,
            progress: true,
            closable: false,
            animateTarget: 'bt4'
        });

        //模擬加載環境
        var f = function (v) {
            return function () {
                if (v == 12) {
                    Ext.MessageBox.hide();
                    Ext.Msg.alert("提示", "加載完畢！");
                } else {
                    var i = v / 11;
                    Ext.MessageBox.updateProgress(i, Math.round(100 * i) + '% 完成');
                }
            };
        };
        for (var i = 1; i < 13; i++) {
            setTimeout(f(i), i * 200);
        }
    });

效果展示：

五、等待進度條對話框

展示等待進度條的對話框，提示用戶當前正在等待某一任務執行。

[Js]

    Ext.get('bt5').on('click', function () {
        Ext.MessageBox.show({
            msg: '正在保存數據..',
            progressText: '保存中...',
            width: 300,
            wait: true,
            waitConfig: { interval: 200 },
            icon: 'download',
            animateTarget: 'bt5'
        });
        setTimeout(function () {
            Ext.MessageBox.hide();
            Ext.Msg.alert("提示", "保存完畢！");
        }, 3000);
    });

效果展示：

六、基本的等待對話框

這裏演示基本的等待對話框的實現方式。

[Js]

    Ext.get('bt6').on('click', function () {
        Ext.MessageBox.wait("詳細信息內容", "標題", {
            interval: 100       //進度條加載速度
        });
        setTimeout(function () {
            Ext.MessageBox.hide();
            Ext.Msg.alert("提示", "完畢！");
        }, 35000);
    });

效果展示：