Home » Ext JS 2.x 入門教學

[Ext]訊息提示視窗元件組 (二)

Ext.MessageBox.alert()

如果要代替 JavaScript 標準的 alert() 確認方塊的話,那麼 Ext.MessageBox.alert() 就是你的不二選擇,它提供了一個 OK 鈕的訊息對話方塊。如果有提供回呼函數(CallBack)的話,則當使用者按下訊息對話方塊的鈕時就會觸發該函數(包括右上角的 X 關閉鈕),並把所按下那一個鈕的 id 當做參數傳到函數中。

呼叫格式:
alert( String title, String msg, [Function fn], [Object scope] )

參數說明:
title : String
訊息對話方塊的標題
msg : String
訊息對話方塊的內容
fn : Function
(選填)當訊息對話方塊關閉後的回呼函數
scope : Object
(選填)回呼函數的作用範圍

回傳值:
Ext.MessageBox

使用範例:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
<!--
	Ext.onReady(function(){
		Ext.Msg.alert('說明', '看完訊息了嗎?請按下 OK', callBackFunc);
		function callBackFunc(id){
			alert('你按下的鈕是' + id);
		}
	});
//-->
</script>

瀏覽 0001/0004.html

我們可以試著分別按下 OK 鈕及右上角的 X 鈕,看看有什麼不同:

ext_messagebox_2_1

Ext.MessageBox.confirm()

如果要代替 JavaScript 標準的 confirm() 對話方塊的話,那麼 Ext.MessageBox.confirm() 就是你的不二選擇,它提供了一個 YES 鈕及一個 NO 鈕的訊息對話方塊。如果有提供回呼函數(CallBack)的話,則當使用者按下訊息對話方塊的鈕時就會觸發該函數(包括右上角的 X 關閉鈕),並把所按下那一個鈕的 id 當做參數傳到函數中。

呼叫格式:
confirm( String title, String msg, [Function fn], [Object scope] )

參數說明:
title : String
訊息對話方塊的標題
msg : String
訊息對話方塊的內容
fn : Function
(選填)當訊息對話方塊關閉後的回呼函數
scope : Object
(選填)回呼函數的作用範圍

回傳值:
Ext.MessageBox

使用範例:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
<!--
	Ext.onReady(function(){
		Ext.Msg.confirm('說明', '覺得 Ext JS 有趣嗎?', callBackFunc);
		function callBackFunc(id){
			alert('你按下的鈕是' + id);
		}
	});
//-->
</script>

瀏覽 0001/0005.html

要注意的是,當按下 NO 鈕或是右上角的 X 鈕均是回傳的 id 都一樣為 no,跟 alert()cancel 是不同的,且 confirm() 是會多帶一個問號的圖示

ext_messagebox_2_2

什麼?想把 OK 鈕改成其它字串內容?這部份當然可以做到,不過我們會在最後的部份才說明怎樣修改跟設定。

3 筆針對 [Ext]訊息提示視窗元件組 (二) 的迴響

  1. 男丁老師您好

    能否請教一下
    我有個超連結按鈕,想再按下後出現confirm對話框,並在案下yes後轉往該網頁
    有方法可以達到嗎?

    謝謝

    ps.我之前做了一小段如下,但只是再按下後加上連結屬性而已

    $('#bt').bind('click',addUrl);
    function addUrl(){
    confirm('URL', '前往雅虎', callBackFunc);
    function callBackFunc(id){
    if(id=='yes'){
    $(this).prev().attr('href','tw.yahoo.com');
    }
    }
    }

發表迴響