Ext JS消息提示框主要包括：alert、confirm、prompt、show
1、Ext.MessageBox.alert()
調用格式：
alert( String title, String msg, [Function fn], [Object scope] )
參數說明：
title：提示框的標題。
msg：顯示的消息內容。
[Function fn]：（可選）回調函數。
[Object scope]：（可選）回調函數的作用域。
返回值：
Ext.window.MessageBox
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head runat="server">
5 <title>Hello World</title>
6 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
7 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
8 <script type="text/javascript">
9 Ext.onReady(function () {
10 Ext.MessageBox.alert("提示", "Hello World !");
11 });
12 </script>
13 </head>
14 <body>
15 </body>
16 </html>
效果圖：
ExtJS MessageBox alert支持HTML格式文本。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>Ext.MessageBox.alert支持HTML格式文本</title>
5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 Ext.onReady(function () {
9 Ext.MessageBox.alert("提示", "<font color='red'>支持HTML格式文本</font>");
10 });
11 </script>
12 </head>
13 <body>
14 </body>
15 </html>
效果圖：
回調函數：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>Hello World</title>
5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 // Ext.onReady(function () {
9 // Ext.MessageBox.alert("提示", "Hello World !", callBack);
10 // });
11
12 // function callBack(id) {
13 // alert("單擊的按鈕ID是：" + id);
14 // }
15
16 Ext.onReady(function () {
17 Ext.MessageBox.alert("提示", "Hello World !", function (id) { alert("單擊的按鈕ID是：" + id); });
18 });
19 </script>
20 </head>
21 <body>
22 </body>
23 </html>
2、Ext.MessageBox.confirm()
調用格式：
confirm( String title, String msg, [Function fn], [Object scope] )
參數說明及返回值與Ext.MessageBox.alert()相同。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>Ext.MessageBox.confirm</title>
5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 // Ext.onReady(function () {
9 // Ext.MessageBox.confirm("提示", "請單擊我，做出選擇！", callBack);
10 // });
11
12 // function callBack(id) {
13 // alert("單擊的按鈕ID是：" + id);
14 // }
15
16 Ext.onReady(function () {
17 Ext.MessageBox.confirm("提示", "請單擊我，做出選擇！", function (id) { alert("單擊的按鈕ID是：" + id); });
18 });
19 </script>
20 </head>
21 <body>
22 </body>
23 </html>
效果圖：
3、Ext.MessageBox.prompt()
調用格式：
confirm( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] )
參數說明：
[Boolean/Number multiline]：設置為false將顯示一個單行文本域，設置為true將以默認高度顯示一個多行文本區。或者以像素為單位直接設置文本域的高度。默認為false。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>Ext.MessageBox.prompt</title>
5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 // Ext.onReady(function () {
9 // Ext.MessageBox.prompt("提示", "請輸入內容：", callBack, this, true, "我是默認值");
10 // });
11
12 // function callBack(id, msg) {
13 // alert("單擊的按鈕ID是：" + id + "\n" + "輸入的內容是：" + msg);
14 // }
15
16 Ext.onReady(function () {
17 Ext.MessageBox.prompt("提示", "請輸入內容：", function (id, msg) { alert("單擊的按鈕ID是：" + id + "\n" +"輸入的內容是：" + msg); }, this, true, "我是默認值");
18 });
19 </script>
20 </head>
21 <body>
22 </body>
23 </html>
效果圖：
4、Ext.MessageBox.wait()
調用格式：
wait( String msg, [String title] , [Object config] )
參數說明：
msg：顯示的消息內容。
[String title]：提示框標題，為可選參數。
[Object config]：用於配置進度條的配置對象，為可選參數。
返回值：
Ext.window.MessageBox
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ext.MessageBox.wait示例</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.MessageBox.wait("請等待，操作需要一定時間！", "提示", { text:"進度條上的文字" }); }); </script> </head> <body> </body> </html>
效果圖：
5、Ext.MessageBox.show()
Ext.MessageBox常用配置項：
| 配置項 | 類型 | 說明 |
|---|---|---|
| title | String | 提示框標題 |
| msg | String | 顯示的消息內容 |
| width | Number | 對話框的寬度，以px為單位 |
| maxWidth | Number | 對話框的最大寬度，默認為600px |
| minWidth | Number | 對話框的最小寬度，默認為100px |
| closable | Boolean | false將隱藏右上角的關閉按鈕，默認為true |
| modal | Boolean | true為模態窗口，false為非模式窗口 |
| fn | Function | 回調函數 參數說明： buttonId：按鈕id text：輸入的文字 opt：傳入show方法的配置對象 |
| buttons | Number/Boolean | 按鈕組，默認為false，不顯示任何按鈕 |
| progress | Boolean | true則顯示一個進度條，默認為false，該進度條需要由程序控制滾動 |
| progressText | String | 進度條上顯示的文字，默認為“” |
| proxyDrag | Boolean | true則顯示一個highlight拖動代理，默認為false |
| wait | Boolean | true則顯示一個自動滾動的進度條，默認為false |
| waitConfig | Object | 等待進度條的配置對象，在wait為true時有效 |
| prompt | Boolean | true則顯示一個單行文本域，默認為false |
| value | String | 如果prompt設置為true，則value值將顯示在文本域中 |
| multiline | Boolean | 如果prompt設置為true，則multiline為true顯示多行文本域，false顯示單行文本域 |
| defaultTextHeight | Number | 多行文本域的默認高度，默認值為75px |
| icon | String | 一個樣式文件，它為對話框提供一個背景圖 |
Buttons配置項：
| 提示框按鈕配置對象 | 說明 |
|---|---|
| Ext.Msg.CANCEL | 只顯示一個“取消”按鈕 |
| Ext.Msg.NO | 只顯示一個“否”按鈕 |
| Ext.Msg.OK | 只顯示一個“確定”按鈕 |
| Ext.Msg.OKCANCEL | 顯示兩個按鈕，“確定”和“取消” |
| Ext.Msg.YES | 只顯示一個“是”按鈕 |
| Ext.Msg.YESNO | 顯示兩個按鈕，“是”和“否” |
| Ext.Msg.YESNOCANCEL | 顯示三個按鈕，“是”、“否”和“取消” |
圖標樣式說明：
| 樣式表 | 說明 |
|---|---|
| Ext.Msg.ERROR | 錯誤圖標 |
| Ext.Msg.INFO | 信息圖標 |
| Ext.Msg.QUESTION | 問題圖標 |
| Ext.Msg.WARNING | 警告圖標 |
調用格式：
show( Object config)
參數說明：
一個包含提示框配置信息的配置對象
返回值：
Ext.window.MessageBox
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ext.MessageBox.show</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.MessageBox.show({ title: "提示", msg: "三個按鈕、一個多行文本域", modal: true, prompt: true, value: "請輸入", fn: function (id, msg) { Ext.MessageBox.alert("單擊的按鈕id是:" + id + "\n" + "輸入的內容是:" + msg); }, buttons: Ext.Msg.YESNOCANCEL, icon: Ext.Msg.QUEATION }); }); </script> </head> <body> </body> </html>
效果圖：
