快捷導(dǎo)航

ExtJS Ext.MessageBox.alert()彈出對(duì)話框詳解

更新時(shí)間：2010年04月02日 19:20:15 作者：

Ext.MessageBox是一個(gè)工具類，他繼承自O(shè)biect對(duì)象，用來生成各種風(fēng)格的信息提示對(duì)話框，Ext.Msg是該類的別名，使用Ext.MessageBox和用Ext.Msg效果是一樣的，而后者提供了更簡單的方式。

復(fù)制代碼代碼如下:

 
Ext.onReady(function() { 
Ext.Msg.alert('提示', '逗號(hào)分隔參數(shù)列表'); //這種方式非常常見的 
}); 

效果圖：

復(fù)制代碼代碼如下:

 
Ext.onReady(function() { 
//定義 JSON(配置對(duì)象) 
var config = { 
title:'提示', 
msg: 'JSON配置方式，簡單吧' 
} 
Ext.Msg.show(config); 
}); 

效果圖：

上邊我只是簡單舉例，好了看到了漂亮的界面了吧！接下來認(rèn)識(shí)一下Ext.MessageBox
Ext.MessageBox是一個(gè)工具類，他繼承自O(shè)biect對(duì)象，用來生成各種風(fēng)格的信息提示對(duì)話框，Ext.Msg是該類的別名，使用Ext.MessageBox和用Ext.Msg效果是一樣的，而后者提供了更簡單的方式。在介紹前，下來了解Ext.MessageBox提供的信息提示框與JavaScript提供的原始信息提示框的差別，主要表現(xiàn)在3個(gè)方面，他們分別是“實(shí)現(xiàn)方式”、“顯示信息的格式”、和“對(duì)程序運(yùn)行的影響”，下面對(duì)著3方面分別進(jìn)行詳細(xì)說明。
1、實(shí)現(xiàn)方式：
標(biāo)準(zhǔn)JavaScript提供的信息提示對(duì)話框是一個(gè)真正的彈出窗口。Ext.MessageBox提供的信息提示對(duì)話框并不是真正的彈出窗口，他只是在當(dāng)前頁面顯示的一個(gè)層(div)，所以無法用窗口撲捉到軟件來的到他
2、顯示信息的格式：
標(biāo)準(zhǔn)JavaScript提供的信息提示對(duì)話框中顯示的內(nèi)容不是HTML格式文本，而是純文本。
不能使用HEML中的格式化方法進(jìn)行排版，只能以空格、回車以及各種標(biāo)點(diǎn)符來構(gòu)建顯示格式。
Ext.MessageBox提供的信息提示對(duì)話框顯示的文本不僅支持純文本顯示還支持用HTML格式文本，采用HTML中的格式化方法進(jìn)行排版，效果更加豐富多彩。下面是一個(gè)簡單的示例。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
alert('只能用純文本');//這里不支持HTML格式的字符串 
</script> 

效果圖：

復(fù)制代碼代碼如下:

 
//支持html格式文本 
Ext.onReady(function() { 
Ext.Msg.alert('<font size=4>提示</font>','<font color=red> 支持html格式文本 </font>'); 
}); 

效果圖：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
Ext.onReady(function() { 
alert('我會(huì)停止程序的執(zhí)行'); 
Ext.Msg.alert('提示','我不會(huì)停止程序的執(zhí)行'); 
}); 
</script> 

效果圖：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
Ext.onReady(function() { 
Ext.Msg.alert('提示','我不會(huì)停止程序的執(zhí)行'); 
alert('我會(huì)停止程序的執(zhí)行'); 
}); 
</script> 

效果圖：

看到效果了很簡單很簡單吧！下面我們了解一下怎么回調(diào)函數(shù)，一個(gè)只讀信息提示框，用來代替JavaScript標(biāo)準(zhǔn)的alert()方法有一個(gè)確定按鈕，如果其提供一個(gè)回調(diào)函數(shù)，則該函數(shù)將在單擊按鈕后被調(diào)用(包括右上角的推出按鈕)，所單擊按鈕的id將被作為唯一的參數(shù)傳遞到回調(diào)函數(shù)中。
調(diào)用格式：
alert( String title,String msg,[function fn],[Object scope]);
//參數(shù)說明
title: 提示框的標(biāo)題
msg: 顯示的信息內(nèi)容
[function fn]: (可選) 回調(diào)函數(shù)
[Object scopt]: (可選) 回調(diào)函數(shù)的作用域
返回值：
Ext.MessageBox
示例：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
Ext.onReady(function() { 
Ext.MessageBox.alert('提示', '請(qǐng)單擊我 確定', callBack); 
function callBack(id) { 
alert('單擊的按鈕id是：'+id); 
} 
}); 
</script> 

效果圖：
點(diǎn)擊OK的效果

點(diǎn)擊x的效果

提示：由于ExtJS的alert是異步執(zhí)行的不會(huì)產(chǎn)生阻塞，因此要將用戶確認(rèn)后才執(zhí)行的代碼放在回調(diào)函數(shù)中，否則在用戶確認(rèn)后續(xù)代碼就會(huì)執(zhí)行造成不必要的錯(cuò)誤，這一點(diǎn)需要我們注意的。

您可能感興趣的文章: