ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- Message Box ( 訊息框 )

通常使用一般網頁，填妥一張表格要送出，可能會將頁面導回主檔頁面，或者是在頁面上顯示文字說明送出完成，也可以像這篇主題一樣，彈出訊息讓使用者知道動作已經完成，可以按下確定，繼續下一個動作。

訊息框

首先就來建立一個基本的訊息框：

Ext.MessageBox.alert('提示', '儲存成功');

或者，在按下訊息框後再處理另外的指令，可以這樣處理：

Ext.MessageBox.alert('提示', '儲存成功', callback);

function callback() {
    alert('視窗關閉');
}

執行後畫面如下：

確認框

Ext.MessageBox.confirm("確認","確定儲存");

執行後畫面如下：

這裡可以結合小弟先前的 ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- 動態複製表單並送出 的文章，再送出時加上確認框，如果確認則送出，取消則不送出。按鈕結果狀態有二， yes 或 no。

在送出表單時可以修改成：

Ext.MessageBox.confirm("確認", "確定儲存", function (btn) {
    if (btn == 'yes') {
        Ext.getCmp('form').getForm().submit({
            // 傳送到 url
            url: 'http://localhost:8090/api/Product/Post',
            method: 'POST'
        });
    }
});

而 API 就會接收到 Form 來的訊息

修改按鈕顯示文字

上面的例子在彈出視窗後，按鈕文字都是英文的，如何修改按鈕顯示文字，透過以下指令：

Ext.MessageBox.buttonText = {
    ok: "確定",
    cancel: "取消",
    yes: "是",
    no: "否"
};

而確認框中，就會顯示：

輸入框

輸入空可以用在密碼再次確認的情況，將密碼送回到 API 檢查，視使用者是否有權限進入下一頁。

Ext.MessageBox.prompt("輸入", "您的密碼：", function (btn, text) {
   
});

按鈕結果狀態有二，ok 與 cancel， btn 為選擇狀態；text 為輸入文字。

自訂義訊息框

參數設定如以下程式碼，稍微看一下註解應該就差不多了：

Ext.MessageBox.show({
    title: '標題',
    msg: "自訂義訊息框",
    // 寬度
    width: 300,
    // 多行輸入
    multiline: true,
    // 關閉按鈕
    closable: false,
    // 顯示圖示
    icon: Ext.MessageBox.INFO,
    // 按鈕型態
    buttons: Ext.MessageBox.YESNOCANCEL,

    fn:  function(btn, text) {
   
    }
});

icon 可以設定成： INFO ( 訊息圖示 )、WARNING ( 警告圖示 )、QUESTION ( 詢問圖示 )、 ERROR ( 錯誤圖示 )
buttons 可以設定成： OK ( 確定 )、 CANCEL ( 取消 )、OKCANCEL( 確定和取消 )、YESNO ( 是和否 )、YESNOCANCEL ( 是和否和取消 )

進度框

進度框也是自訂義訊息框的一種，它只需要把屬性 progress 改為 true 就可以了。

進度框可以使用 Ext.MessageBox.updateProgress 設定進度與文字，以下參考 ExtJs学习之弹出框，提示框，输入框等框。

Ext.MessageBox.show({
    title: '上傳中',
    msg: "正在上傳檔案...",
    progressText: '正在初始化...',
    // 寬度
    width: 300,
    // 關閉按鈕
    closable: false,
    // 顯示進度
    progress: true,
    fn:  function(btn,text) {   
    }

});

var f = function (v) {
    return function () {
        if (v == 22) {
            Ext.MessageBox.hide();
            Ext.MessageBox.alert('完成', '所有項目上傳完成');
        } else {
            var i = v / 21;
            Ext.MessageBox.updateProgress(i, Math.round(100 * i) + '% 已完成');
        }
    };
};

for (var i = 0; i < 23; i++) {
    setTimeout(f(i), i * 500);
}

執行後如下圖：

參考與引用：ExtJs学习之弹出框，提示框，输入框等框、ExtJS 入门学习之 messagebox篇