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

2019-11-21 00:36:45

字體：大中小

供稿：網(wǎng)友

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

效果圖：

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

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

效果圖：

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

復(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('我會停止程序的執(zhí)行'); 
Ext.Msg.alert('提示','我不會停止程序的執(zhí)行'); 
}); 
</script> 

效果圖：

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

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

效果圖：

看到效果了很簡單很簡單吧！下面我們了解一下怎么回調(diào)函數(shù)，一個只讀信息提示框，用來代替JavaScript標(biāo)準(zhǔn)的alert()方法有一個確定按鈕，如果其提供一個回調(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('提示', '請單擊我 確定', callBack); 
function callBack(id) { 
alert('單擊的按鈕id是：'+id); 
} 
}); 
</script> 

效果圖：
點擊OK的效果