一 提示框
語法：Ext.Msg.alert(String title, String msg, Function fn, Object scope);
參數：
title:標題
msg:提示內容
fn:提示框關閉后自動調用的回調函數
scope:作用域，用於指定this指向哪里，一般不用
例子：
//提示框
popMsgBox = function () {
Ext.MessageBox.alert("提示框", "這是一個提示框", function () {
alert("提示框要關閉了！");
});
};
二 輸入框
語法：Ext.Msg.prompt(String title, String msg, Function fn, Object scope, Boolean/Number multiline);
參數：
title:標題
msg:消息框內容
fn:消息框關閉后自動調用的回調函數
scope:作用域，用於指定this指向哪里，一般不用
multiline:如果為true或為數字，將允許輸入多選或者指定默認高度（像素），反之不能多行
例子：
//單行輸入框 inputMsgBox1 = function () { Ext.Msg.prompt("輸入框", "請輸入您的姓名： ", function (btn, txt) { Ext.Msg.alert("結果", "您點擊了" + btn + "按鈕，<br>輸入的內容為" + txt); }); }; //多行輸入框 inputMsgBox2 = function () { Ext.Msg.prompt("輸入框", "請輸入您的姓名： ", function (btn, txt) { Ext.Msg.alert("結果", "您點擊了" + btn + "按鈕，<br>輸入的內容為" + txt); }, this, 300); };
三 確認框
語法：Ext.Msg.confirm(String title, String msg, Function fn, Object scope);
參數：
title:標題
msg:內容
fn:消息框關閉后自動調用的回調函數
scope:作用域，用於指定this指向哪里，一般不用
例子：
//確認框
confirmMsgBox = function () {
Ext.Msg.confirm("確認框", "請點擊下面的按鍵做出選擇", function (btn) {
Ext.Msg.alert("您點擊的按鈕是： " + btn);
});
};
四 自定義消息框
語法：Ext.Msg.show(Object config);
參數：config中常見屬性如下：
title:標題
msg:消息內容
width:消息框寬度
multiline:是否顯示多行
closable:是否顯示關閉按鈕
buttons:按鈕
icons:圖標
fn:回調函數
其中：
buttons的取值如下：
OK:只有”確定“按鈕
CANCEL:只有”取消“按鈕
OKCANCEL:有”確定“和”取消“按鈕
YESNO:有”是“和”否“按鈕
YESNOCANCEL:有”是“、”否“和”取消“按鈕
icons的取值如下：
INFO:信息圖標
WARNING:警告圖標
QUESTION:詢問圖標
ERROR:錯誤圖標
例子：
//自定義消息框
customMsgBox = function () {
var config = {
title: "自定義消息框",
msg: "這是一個自定義消息框",
width: 300,
multiline: true,
closable: true, //是否顯示關閉按鈕
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.Info,
fn: function (btn, txt) { alert("你點擊的按鍵是： " + btn + " 你輸入的內容是： " + txt); }
};
Ext.Msg.show(config);
};
五 進度條對話框
其實就是一個自定義的消息框。
例子：
//進度條對話框 progressMsgBox = function () { Ext.Msg.show({ title: "請稍后", msg: "正在加載...", progressText: "正在初始化...", width: 300, progress: true, closable: false }); var fun = function (v) { return function () { if (v == 12) { Ext.Msg.hide(); Ext.Msg.alert("完成", "所有項目加載完成"); } else { var i = v / 11; Ext.Msg.updateProgress(i, "已加載" + Math.round(100 * i) + "%"); }; }; }; for (var i = 1; i < 13; i++) { setTimeout(fun(i), i * 100); } };
六 飛出來的消息框
例子如下：
//飛出來的消息框
animalMsgBox = function () {
var config = {
title: "飛出來的消息框",
msg: "這是一個飛出來的消息框",
width: 300,
multiline: false,
closable: false,
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION,
animEl: "btnProgressMsgBox"
};
Ext.Msg.show(config);
};
設置animEl，該選項指定一個標簽，消息框從該標簽處飛出，關閉后又買回標簽。（但我利用Extjs.4.07沒有看到效果，所說利用Extjs.2.XX可以看到效果，沒有實驗）。
七 整體代碼
<!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> <title>消息框</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="Stylesheet" type="text/css" /> <script type="text/javascript" src="ext-4.0.7-gpl/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function () { //Ext.Msg.alert("提示框", "這是一個提示框"); }); //提示框 popMsgBox = function () { Ext.MessageBox.alert("提示框", "這是一個提示框", function () { alert("提示框要關閉了！"); }); }; //單行輸入框 inputMsgBox1 = function () { Ext.Msg.prompt("輸入框", "請輸入您的姓名： ", function (btn, txt) { Ext.Msg.alert("結果", "您點擊了" + btn + "按鈕，<br>輸入的內容為" + txt); }); }; //多行輸入框 inputMsgBox2 = function () { Ext.Msg.prompt("輸入框", "請輸入您的姓名： ", function (btn, txt) { Ext.Msg.alert("結果", "您點擊了" + btn + "按鈕，<br>輸入的內容為" + txt); }, this, 300); }; //確認框 confirmMsgBox = function () { Ext.Msg.confirm("確認框", "請點擊下面的按鍵做出選擇", function (btn) { Ext.Msg.alert("您點擊的按鈕是： " + btn); }); }; //自定義消息框 customMsgBox = function () { var config = { title: "自定義消息框", msg: "這是一個自定義消息框", width: 300, multiline: true, closable: true, //是否顯示關閉按鈕 buttons: Ext.Msg.YESNOCANCEL, icon: Ext.Msg.Info, fn: function (btn, txt) { alert("你點擊的按鍵是： " + btn + " 你輸入的內容是： " + txt); } }; Ext.Msg.show(config); }; //進度條對話框 progressMsgBox = function () { Ext.Msg.show({ title: "請稍后", msg: "正在加載...", progressText: "正在初始化...", width: 300, progress: true, closable: false }); var fun = function (v) { return function () { if (v == 12) { Ext.Msg.hide(); Ext.Msg.alert("完成", "所有項目加載完成"); } else { var i = v / 11; Ext.Msg.updateProgress(i, "已加載" + Math.round(100 * i) + "%"); }; }; }; for (var i = 1; i < 13; i++) { setTimeout(fun(i), i * 100); } }; //飛出來的消息框 animalMsgBox = function () { var config = { title: "飛出來的消息框", msg: "這是一個飛出來的消息框", width: 300, multiline: false, closable: false, buttons: Ext.Msg.YESNOCANCEL, icon: Ext.Msg.QUESTION, animEl: "btnProgressMsgBox" }; Ext.Msg.show(config); }; </script> </head> <body> <input type="button" id="btnPopMsgBox" value="提示框" onclick="popMsgBox();" /> <input type="button" id="btnInputMsgBox1" value="單行輸入框" onclick="inputMsgBox1();" /> <input type="button" id="btnInputMsgBox2" value="多行輸入框" onclick="inputMsgBox2();" /> <input type="button" id="btnComfirmMsgBox" value="確認框" onclick="confirmMsgBox();" /> <input type="button" id="btnCustomMsgBox" value="自定義消息框" onclick="customMsgBox();" /> <input type="button" id="btnProgressMsgBox " value="進度條對話框" onclick="progressMsgBox ();" /> <input type="button" id="btnAnimalMsgBox" value="飛出來的消息框" onclick="animalMsgBox ();" /> </body> </html>