Home » Ext JS 2.x 入門教學

[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

使用範例:

檢視原始碼 JavaScript
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 值,所以一開始仔細注意一下訊息提示視窗是從那邊飛出來的;且 modalfalse 的關係,所以背景就不會有 Block 視窗

ext_messagebox_4_1

Ext.MessageBox 其它相關功能

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

1.變更預設的按鈕文字

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

使用範例:

檢視原始碼 JavaScript
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 這些沒有設定到的話,它們就會變成空白了:

ext_messagebox_4_2

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

使用範例:

檢視原始碼 JavaScript
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 來指定時,其子屬性都要小寫

ext_messagebox_4_3

2.動態更新訊息內容

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

使用範例:

檢視原始碼 JavaScript
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_4_4

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
    顯示一個警告圖示

使用範例:

使用內建的圖示

檢視原始碼 JavaScript
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>

使用自訂的圖示

檢視原始碼 JavaScript
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 的一些屬性:

ext_messagebox_4_5

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

  1. 請問一下大大都用什麼工具開發ExtJS呢?
    目前有工具有像NetBeans那樣可以自動完成快顯~
    例:
    輸入 Ext.MessageBox. 的時候會出現Ext.MessageBox.下面有那些方法可以用
    會顯視 buttonText xxxxx xxxxxx 可以用

  2. 不知道板大有沒有發生過以下這個問題~
    例如我寫了一個window然後想透過按鈕來取得textfield裡的值
    this.ownerCt.items.first().getValue() 會發生取不到值
    this.ownerCt.items <-都是正常的可是就是get不到值

    程式:
    new Ext.Window({
    省略..
    items:{
    xtype:"textfield",
    fieldLabel:"姓名"
    },
    buttons:[{
    省略..
    alert(this.ownerCt.items.first().getValue())//重點-會取不到值
    alert(this.ownerCt.ownerCt.items.first().getValue())//取的到值正常@_@

    結論:
    很多地方會用到像上面那樣的用法可是在window裡面確是有問題的~怪..
    很多教學都是可以在window裡面使用this.ownerCt.items.first().getValue()
    取得值~而我試過用2.0 2.1 2.2 3.0的extjs都是沒辦法用的 = =

    • 我並沒遇過這樣的問題耶..可能是我寫過的 ExtJs 還不多的關係吧!!!
      不過建議可以先一一列出 this.ownerCt.items 到底裡面有什麼東西

    • 背景要拿掉可能要透過其它方式了吧..
      Ext.msg.show() 應該都是有那背景的..除非再去改更進階的東西了

      用這類龐大的套件, 若沒特別深入研究的話, 要改就會很辛苦 XD

  3. 能單純的寫滑鼠的click的監聽事件嗎?
    正常的寫法監聽事件不是都寫在容器或物件裡~
    怎麼寫在body裡怎麼寫呢^^"

  4. Ext.select('body').on('click' 的用法就是把click事件寫入body裡面嗎??
    select <-好像不常看到@_@ 我查了一下資料好像2版的extjs比較多用到...
    3.0的資料及範例都是另外寫一個js

    非常謝謝大大....上班時間還回我呵呵..

發表迴響