Ext的對(duì)話框都封裝在Ext.MessageBox類,該類還有一個(gè)簡(jiǎn)寫形式即Ext.Msg,可以直接通過(guò)Ext.MessageBox或Ext.Msg來(lái)直接調(diào)用相應(yīng)的對(duì)話框方法來(lái)顯示Ext對(duì)話框??聪旅娴拇a:
Alert
標(biāo)準(zhǔn)的“確認(rèn)”對(duì)話框。
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("請(qǐng)注意","這是ExtJS的提示框");
});
});
Html頁(yè)面中的內(nèi)容:
<input id="btnAlert" type="button" value="alert框" />
執(zhí)行程序,點(diǎn)擊上面的“alert框”按鈕,將會(huì)在頁(yè)面上顯示如下圖所示的對(duì)話框。
Ext.MessageBox.alert("請(qǐng)注意","這是ExtJS的提示框",showResult);//調(diào)用回調(diào)函數(shù)顯示你點(diǎn)擊了是什么按鈕
function showResult(btn){
Ext.example.msg('按鈕被點(diǎn)擊', '您點(diǎn)擊了 “{0}” 按鈕。', btn);
};
在瀏覽器上方會(huì)出現(xiàn)如下的消息

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