Ext的對話框都封裝在Ext.MessageBox類,該類還有一個簡寫形式即Ext.Msg,可以直接通過Ext.MessageBox或Ext.Msg來直接調用相應的對話框方法來顯示Ext對話框。看下面的代碼:
Alert
標準的“確認”對話框。
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("請注意","這是ExtJS的提示框");
});
});
Html頁面中的內容:
<input id="btnAlert" type="button" value="alert框" />
執行程序,點擊上面的“alert框”按鈕,將會在頁面上顯示如下圖所示的對話框。
Ext.MessageBox.alert("請注意","這是ExtJS的提示框",showResult);//調用回調函數顯示你點擊了是什么按鈕
function showResult(btn){
Ext.example.msg('按鈕被點擊', '您點擊了 “{0}” 按鈕。', btn);
};
在瀏覽器上方會出現如下的消息

Confirm
標準的“是 / 否”對話框。
我們可以根據需要顯示自下定義的對話框。普通對話框一般包括四個參數,
比如confirm的方法簽名為
confirm ( String title, String msg,[Function fn], [Object scope] )
,參數title表示對話框的標題,參數msg表示對話框中的提示信息,這兩個參數是必須的;可選的參數fn表示當關閉對話框后執行的回調函數,參數
scope表示回調函數的執行作用域。回調函數可以包含兩個參數,即button與text,button表示點擊的按鈕,text表示對話框中有活動輸
入選項時輸入的文本內容。我們可以在回調函數中通過button參數來判斷用戶作了什么什么選擇,可以通過text來讀取在對話框中輸入的內容。
這樣當用戶點擊對話框中的yes按鈕時,就會執行相應的操作,而選擇no則忽略操作。
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.confirm("請確認","是否真的要刪除指定的內容",function(button,text){
if(button=="yes"){
//執行刪除操作
alert("成功刪除");
}
});
});
});
prompt
標準的“提示輸入”對話框。
看看prompt框,我們看下面的代碼:
Ext.onReady(function(){Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt("輸入提示框","請輸入你的新年愿望:",function(button,text){
if(button=="ok"){
alert("你的新年愿望是:"+text);
}
else alert("你放棄了錄入!");
});
});
});
Html頁面:
<input id="btn" type="button" value="對話框" />點擊上面的“對話框”按鈕可以顯示如下圖所示的內容,如果點擊OK按鈕則會輸入你輸入的文本內容,選擇cancel按鈕則會提示放棄了錄入,如下圖所示:
在實際應用中,可以直接使用MessageBox的show方法來顯示自定義的對話框,如下面的代碼:
function save(button){
if(button=="yes")
{
//執行數據保存操作
}
else if(button=="no")
{
//不保存數據
}
else
{
//取消當前操作
}
}
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.Msg.show({
title:'保存數據',
msg: '你已經作了一些數據操作,是否要保存當前內容的修改?',
buttons: Ext.Msg.YESNOCANCEL,
fn: save,
icon: Ext.MessageBox.QUESTION});
});
});
點擊“對話框”按鈕可顯示一個自定義的保存數據對話框,對話框中包含yes、no、cancel三個按鈕,可以在回調函數save中根據點擊的按鈕執行相應的操作,如圖xx所示。