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

Ext.MessageBox.show()

前面介紹的訊息提示視窗都是使用很簡單的方式來取代原來標準的 JavaScript 對話方塊，不過如果想要有更進階、功能更強大的訊息提示對話方塊的話，那就得要使用 Ext.MessageBox.show()。

呼叫格式：
show( Object config )

參數說明：
config : Object
支援以下的選項

• animEl : String/Element
  訊息提示視窗動畫顯示或關閉時的目標元素或 ID；預設 undefined
• buttons : Object/Boolean
  訊息提示視窗的按鈕設定，例如 Ext.MessageBox.OKCANCEL 或 {ok:'確定', cancel:'不要'}，或者設為 false 則不顯示任何按鈕；預設 false
• closable : Boolean
  是否顯示右上角的關閉鈕，設 false 則不顯示；預設為 true
  如果有設定 wait 或 progress 為 true 時則會忽略此參數，對話方塊只能透過程式自行關閉
• cls : String
  套用訊息提示視窗內容的自訂的 CSS 的 className 值
• defaultTextHeight : Number
  如果 prompt 為 true 且 multiline 為 true 時，此 defaultTextHeight 值為文字輸入框的高度，以像素為單位；預設 75
  不過我怎麼試都沒有任何效果？！
• fn : Function
  當訊息對話方塊關閉後的回呼函數
• scope : Object
  回呼函數的作用範圍
• icon : String
  一個 CSS 的 className 值，可提供訊息對話方塊的背景圖示，例如 Ext.MessageBox.WARNING 或 'custom-class'；預設 ""(空字串)
• iconCls : String
  一個標準的 Ext.Window.iconCls，可提供訊息對話方塊標題的背景圖示；預設 ""(空字串)
• maxWidth : Number
  訊息對話方塊最大的寬度，以像素為單位；預設是 600
• minWidth : Number
  訊息對話方塊最小的寬度，以像素為單位；預設是 100
• modal : Boolean
  true 則會在顯示為模式窗口(Block)，false 則為非模式窗口；預設 true
• msg : String
  訊息對話方塊的內容
• multiline : Boolean
  如果 prompt 設為 true 時，當 multiline 為 true 則顯示多行的文字輸入框，false 則為單行文字輸入框；預設 false
• progress : Boolean
  設為 true 則顯示進度列對話框；預設是 false
• progressText : String
  progress 設為 true 時，則 progressText 值會顯示在進度列上
• prompt : Boolean
  設為 true 則顯示單行文字輸入框；預設是 false
• proxyDrag : Boolean
  如果設為 true 的話，則在拖曳訊息提示視窗時會顯示一個替代的視窗；預設為 false
  不過我怎麼試都沒有任何效果？！
• title : String
  訊息對話方塊的標題
• value : String
  prompt 設為 true 時，則 value 值會顯示在文字輸入框中
• wait : Boolean
  設為 true 則顯示一無止盡的進度列；預設為 false
• waitConfig : Object
  一個 Ext.ProgressBar.waitConfig 物件；只有在 wait 為 true 時可使用
• width : Number
  訊息對話方塊的寬度，以像素為單位

回傳值：
Ext.MessageBox

使用範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script type="text/javascript">
<!--
	Ext.onReady(function(){
		var progress = Ext.Msg.show({
			animEl: 'btn',
			title: '範例',
			msg: '這是一個有趣的訊息提示視窗範例',
			prompt: true,
			value: '謝謝你',
			wait: true,
			modal: false,
			buttons: {yes: '是的', no: '不對吧', cancel: '無聊'},
			fn: callBackFunc
		});
		function callBackFunc(id, text){
			alert('你按下的鈕是:' + id + '\r\n輸入的值是:' + text);
		}
	});
//-->
</script>

瀏覽 0001/0009.html

因有指定的 animEl 值，所以一開始仔細注意一下訊息提示視窗是從那邊飛出來的；且 modal 為 false 的關係，所以背景就不會有 Block 視窗：



Ext.MessageBox 其它相關功能

其實 Ext.MessageBox 中常用到的主要功能都有介紹到，也能滿足大部份的情況使用。當然還提供了其它更方便訂製的功能讓使用者來自由使用，像是能變更按鈕文字、動態更新訊息內容等等。接下來會分別就這兩部份再說明：

1.變更預設的按鈕文字

不知道是否有人注意到上一個範例中的按鈕是顯示中文字呢？沒錯，透過那樣的方式就能以很簡單的方式來變更顯示文字。不過如果訊息提示視窗太多的話，那就變成都要一一設定，感覺就又很麻煩。因此 Ext.MessageBox 還多提供了 buttonText 屬性來讓使用者改變全域預設的文字值。

使用範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript">
<!--
	Ext.onReady(function(){
		Ext.MessageBox.buttonText = {
			yes: '是~',
			no: '不要按'
		}
 
		var progress = Ext.Msg.show({
			title: '範例',
			msg: '這是變更預設的按鈕文字範例 1',
			buttons: Ext.MessageBox.YESNO
		});
	});
//-->
</script>

瀏覽 0001/0010.html

buttonText 的設定要在訊息對話方塊顯示之前才有效；不過因為這樣的設定是會改變全部的 buttonText 值，所以像是 cancel、ok 這些沒有設定到的話，它們就會變成空白了：



除非全部都要變更，否則可以只指定某些有用到的屬性值就可以了，這樣就不會覆蓋了其它屬性

使用範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
<!--
	Ext.onReady(function(){
		Ext.MessageBox.buttonText.yes = '是~';
		Ext.MessageBox.buttonText.no = '不要按';
 
		var progress = Ext.Msg.show({
			title: '範例',
			msg: '這是變更預設的按鈕文字範例 2',
			buttons: Ext.MessageBox.YESNOCANCEL
		});
	});
//-->
</script>

瀏覽 0001/0011.html

一一指定的話，其它沒指定的就會用預設值來顯示；要特別注意的是，當使用 buttonText 來指定時，其子屬性都要小寫：



2.動態更新訊息內容

這部份其實就在介紹 wait() 跟 progress() 時就有使用到了，因此讓我們直接來看範例

使用範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<script type="text/javascript">
<!--
	Ext.onReady(function(){
		var progress = Ext.Msg.show({
			title: '範例',
			msg: '這是動態更新訊息內容及進度列',
			progress: true,
			buttons: Ext.MessageBox.YESNO
		});
 
		var times = 0;
		setTimeout(actionFunc, 1000);
		function actionFunc(){
			times++;
			progress.updateProgress(times/10, '進度 ' + (times*10) + ' %');
			if(times<10){
				progress.updateText('這是第 ' + times + ' 次更新訊息提示內容!');
				setTimeout(actionFunc, 1000);
			}else{
				progress.updateText('恭喜你~進度已經 100 % 了!!');
			}
		}
	});
//-->
</script>

瀏覽 0001/0012.html

updateText() 是用來更新訊息內容用；updateProgress() 除了更新進度列的值及進度列上的文字之外，第三個參數如有提供的話，也能更新訊息內容：



Ext.MessageBox 其它相關屬性

buttons : Object
支援以下的選項；使用時要注意大小寫 Ext.MessageBox.CANCEL 或 Ext.Msg.OKCANCEL

• CANCEL : Object
  顯示一個 Cancel 鈕
• OK : Object
  顯示一個 OK 鈕
• OKCANCEL : Object
  顯示兩個按鈕，OK 鈕跟 Cancel鈕
• YESNO : Object
  顯示兩個按鈕，Yes 鈕跟 No 鈕
• YESNOCANCEL : Object
  顯示三個按鈕，Yes 鈕、 No 鈕跟 Cancel 鈕

icons : String
支援以下的選項；使用時要注意大小寫 Ext.MessageBox.ERROR 或 Ext.Msg.INFO

• ERROR : String
  顯示一個錯誤圖示
• INFO : String
  顯示一個資訊圖示
• QUESTION : String
  顯示一個問題圖示
• WARING : String
  顯示一個警告圖示

使用範例：

使用內建的圖示

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
<!--
	Ext.onReady(function(){
		var progress = Ext.Msg.show({
			title: '範例',
			msg: '我是有 icon 圖示的~',
			icon: Ext.MessageBox.INFO,
			buttons: Ext.MessageBox.YESNO
		});
	});
//-->
</script>

使用自訂的圖示

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
<!--
	Ext.onReady(function(){
		var progress = Ext.Msg.show({
			title: '範例',
			msg: '我是自訂 icon 圖示的~',
			icon: 'abgne-other',
			buttons: Ext.MessageBox.YESNO
		});
	});
//-->
</script>

瀏覽 0001/0013.html

要使用自訂的圖示的話，就要先設好一個 className，並加上 background 的一些屬性：