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


Ext.MessageBox是一個工具類,他繼承自Obiect對象,用來生成各種風格的信息提示對話框,Ext.Msg是該類的別名,使用Ext.MessageBox和用Ext.Msg效果是一樣的,而后者提供了更簡單的方式。
 
復制代碼 代碼如下:

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

效果圖:

復制代碼 代碼如下:

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

效果圖:

上邊我只是簡單舉例,好了看到了漂亮的界面了吧!接下來認識一下 Ext.MessageBox
Ext.MessageBox是一個工具類,他繼承自Obiect對象,用來生成各種風格的信息提示對話框,Ext.Msg是該類的別名,使用Ext.MessageBox和用Ext.Msg效果是一樣的,而后者提供了更簡單的方式。在介紹前,下來了解Ext.MessageBox提供的信息提示框與JavaScript提供的原始信息提示框的差別,主要表現在3個方面,他們分別是“實現方式”、“顯示信息的格式”、和“對程序運行的影響”,下面對着3方面分別進行詳細說明。
1、 實現方式:
標准JavaScript提供的信息提示對話框是一個真正的彈出窗口。Ext.MessageBox提供的信息提示對話框並不是真正的彈出窗口,他只是在當前頁面顯示的一個層(div),所以無法用窗口撲捉到軟件來的到他
2、 顯示信息的格式:
標准JavaScript提供的信息提示對話框中顯示的內容不是HTML格式文本,而是純文本。
不能使用HEML中的格式化方法進行排版,只能以空格、回車以及各種標點符來構建顯示格式。
Ext.MessageBox提供的信息提示對話框顯示的文本不僅支持純文本顯示還支持用HTML格式文本,采用HTML中的格式化方法進行排版,效果更加豐富多彩。下面是一個簡單的示例。
復制代碼 代碼如下:

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

效果圖:

復制代碼 代碼如下:

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

效果圖:

復制代碼 代碼如下:

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

效果圖:

復制代碼 代碼如下:

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

效果圖:

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

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

點擊OK的效果

點擊x的效果


 

 

提示:由於ExtJS的alert是異步執行的不會產生阻塞,因此要將用戶確認后才執行的代碼放在回調函數中,否則在用戶確認后續代碼就會執行造成不必要的錯誤,這一點需要我們注意的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM