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 的一些屬性:
請問一下大大都用什麼工具開發ExtJS呢?
目前有工具有像NetBeans那樣可以自動完成快顯~
例:
輸入 Ext.MessageBox. 的時候會出現Ext.MessageBox.下面有那些方法可以用
會顯視 buttonText xxxxx xxxxxx 可以用
我寫 JavaScript 或是 HTML 等等都是用 EditPlus..
不過它沒有自動完成的提示..所以就是要把一些常用的記起來或是多多看 API 囉。
「Ext JS 開發實戰-次世代 AJAX 解決方案」應該是一本較完整的參考書籍。
http://www.dojochina.com 有提供影片的學習是我目前找到還可以的~
不過是對岸的東西,講師會一直嘆氣和抓頭,討厭這三樣的人請不要下載吧...
不知道板大有沒有發生過以下這個問題~
例如我寫了一個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 到底裡面有什麼東西
大大請問一下等侍的圖
http://www.extjs.net/deploy/dev/examples/form/xml-form.html
按下Load後中間會出見的小小的圖怎單獨使用呢?
例如按下按鈕後畫面會出現像是查看Extjs的doc一樣@@
它的功能是寫在內建的功能中了..
我並沒有去特別研究如何把它拿出來使用..
不過這樣的功能可以自己使用 Ext.Msg.show() 的方式來模擬
http://demonstration.abgne.tw/extjs_2_x/0001/0014.html
大大謝謝你^^
背景不知有沒有辦法拿掉呵呵...
背景要拿掉可能要透過其它方式了吧..
Ext.msg.show() 應該都是有那背景的..除非再去改更進階的東西了
用這類龐大的套件, 若沒特別深入研究的話, 要改就會很辛苦 XD
大大show() 有listeners嗎~
show運行的時候如果想要點一下滑鼠就關掉的話怎麼寫比較好><"
比較簡單的方式是幫 body 加上一個能隱藏的 click 事件
當隱藏後記得移除 click 事件
能單純的寫滑鼠的click的監聽事件嗎?
正常的寫法監聽事件不是都寫在容器或物件裡~
怎麼寫在body裡怎麼寫呢^^"
我平常都是用 jQ 來寫各種效果..
大多數自己做的 mask 效果也是類似的寫法..
你可以試試看
http://demonstration.abgne.tw/extjs_2_x/0001/0014.html
按下鈕出現 Msg 後, 再點一下其它位置
Ext.select('body').on('click' 的用法就是把click事件寫入body裡面嗎??
select <-好像不常看到@_@ 我查了一下資料好像2版的extjs比較多用到...
3.0的資料及範例都是另外寫一個js
非常謝謝大大....上班時間還回我呵呵..
呵..有很多方法能選到指定的 element, 看你那個比較習慣就用那種方式就好了。
大大有沒有玩到gmap的地方呀??
api怎麼都查不到gmap的方法和屬性@@?
怎麼好像是用GMapPanel.js包gmap進來而以~___~||
可以到它官方網站去看 API 及教學
Google 地圖 API