在上一節中，我們用到了MessageBox，在本文中，我們將介紹一下ExtJS中常用的三種MessageBox。

Ext.MessageBox.alert()

這個方法用來打開一個普通的對話框，對話框中只顯示一個確定按鈕。

Ext.get("btn1").on("click", function () {Ext.MessageBox.alert("提示", "按鈕被點擊"); });

• 第一個參數為標題欄
• 第二個參數為內容

效果如下圖【查看在線示例】：

Ext.MessageBox.confirm()

這個方法將打開一個包含yes/no按鈕的對話框，通常用來提示用戶是否要執行敏感操作（例如刪除數據等，需要用戶再次確認，防止誤操作）

Ext.get("btn2").on("click", function () {Ext.MessageBox.confirm("提示", "是否要跳轉頁面？", function (btnId) {if (btnId == "yes") {alert("點擊了yes按鈕");}else if (btnId == "no") {alert("點擊了no按鈕");}else {alert("沒有點擊按鈕，關閉了提示框");}}); });

這個方法的回調函數包含了btnId參數，參數值可以是yes或no。

效果如下圖【查看在線示例】：

Ext.MessageBox.prompt()

接下來是第三種對話框，這中對話框中包含一個輸入框和ok/cancel按鈕。在回調函數中我們可以處理用戶的輸入，回調函數中包含了btnId和text兩個可用的參數，示例代碼如下：

Ext.get("btn3").on("click", function () {Ext.MessageBox.prompt("提示", "請輸入用戶名", function (btnId, text) {if (btnId == "ok") {alert(text);}else {alert("點擊了取消按鈕");}}); });

在用戶輸入了文字并點擊確定按鈕以后，我們將會彈出對話框。

【查看在線示例】

另外，這個方法還允許創建一個多行的輸入框，代碼如下：

Ext.MessageBox.prompt("提示", "請輸入用戶名", function (btnId, text) {if (btnId == "ok") {alert(text);}else {alert("點擊了取消按鈕");} }, window, true);

第三個參數window是默認的作用域

第四個參數是否為多行輸入框，傳入true就表示可以輸入多行文字

運行效果如下【查看在線示例】：

最后一個功能是，如果我們需要在打開的時候顯示一段默認文字，我們可以傳入第五個參數，代碼如下：

Ext.MessageBox.prompt("提示", "請輸入用戶名", function (btnId, text) {if (btnId == "ok") {alert(text);}else {alert("點擊了取消按鈕");} }, window, true, "這是默認文字");

運行效果如下【查看在線示例】：

OK，常用的三種對話框已經完成了。

本文還發布在了ExtJS教程網站起飛網上面，如果轉載請保留本段聲明，謝謝合作。

轉載于:https://www.cnblogs.com/youring2/p/extjs-100-examples-002-messagebox.html

總結

以上是生活随笔為你收集整理的实用ExtJS教程100例-002：MessageBox的三种用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。