ExtJs4 筆記 Ext.MessageBox 消息對話框

本篇示範消息對話框的用法，ExtJs封裝了可能用到的各類消息框，并支援自定義的配置。

如下是用到的html：

[html]

?

1 2 3 4 5 6 7 8 9

< h1 >各種消息框</ h1 > < div id = "div1" class = "content" > < button id = "bt1" type = "button" >Confirm</ button > < button id = "bt2" type = "button" >Prompt</ button > < button id = "bt3" type = "button" >DIY視窗</ button > < button id = "bt4" type = "button" >進度條</ button > < button id = "bt5" type = "button" >進度條2</ button > < button id = "bt6" type = "button" >wait</ button > </ div >

一、警告對話框和确認對話框

展示一個帶“是”，“否”按鈕的确認對話框。當單擊按鈕時，執行回調函數，擷取按鈕類型，并彈出一個警告對話框。

[Js]

?

1 2 3 4 5

Ext.get( "bt1" ).on( "click" , function () { Ext.MessageBox.confirm( "标題" , "詳細資訊内容" , function (btn) { Ext.Msg.alert( "提示" , "你點選了" + btn + "按鈕" ); }); });

效果展示：

二、輸入對話框

展示一個帶文本框的對話框，可以供使用者錄入。單擊按鈕後可以擷取文本框的内容。

[Js]

?

1 2 3 4 5 6 7 8 9 10 11

Ext.get( "bt2" ).on( "click" , function () { Ext.MessageBox.prompt( "标題" , "詳細資訊内容" , function (btn, text) { Ext.Msg.alert( "提示" , "你點選了" + btn + "按鈕,擷取的文本：" + text); }, this , true ,       //表示文本框為多行文本框 "初始文本" ); });

效果展示：

三、自定義DIY對話框

展示一個自定義的對話框，可以定義圖示樣式，按鈕組的類型，是否帶文本框，是否帶進度條等資訊。

[Js]

?

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

Ext.get( "bt3" ).on( "click" , function () { Ext.MessageBox.show({ title: "标題" , msg: "詳細資訊内容" , buttons: Ext.MessageBox.YESNOCANCEL,    //對話框的按鈕組合 multiline: false ,                       //有文本框時，是否為多行文本框 closable: false ,                        //是否可關閉 prompt: true , icon: Ext.MessageBox.WARNING, iconCls: "add16" , 400, proxyDrag: true , value: "初始文本" , progress: true , progressText: "加載中.." , animateTarget: "bt3" }); });

效果展示：

四、加載進度條對話框

展示一個帶加載進度條的對話框，提示目前執行任務的進度資訊。

[Js]

?

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 26 27

Ext.get( 'bt4' ).on( 'click' , function () { Ext.MessageBox.show({ title: '加載視窗' , msg: '詳細資訊内容' , progressText: '加載中...' , 300, progress: true , closable: false , animateTarget: 'bt4' }); //模拟加載環境 var f = function (v) { return function () { if (v == 12) { Ext.MessageBox.hide(); Ext.Msg.alert( "提示" , "加載完畢！" ); } else { var i = v / 11; Ext.MessageBox.updateProgress(i, Math.round(100 * i) + '% 完成' ); } }; }; for ( var i = 1; i < 13; i++) { setTimeout(f(i), i * 200); } });

效果展示：

五、等待進度條對話框

展示等待進度條的對話框，提示使用者目前正在等待某一任務執行。

[Js]

?

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

Ext.get( 'bt5' ).on( 'click' , function () { Ext.MessageBox.show({ msg: '正在儲存資料..' , progressText: '儲存中...' , 300, wait: true , waitConfig: { interval: 200 }, icon: 'download' , animateTarget: 'bt5' }); setTimeout( function () { Ext.MessageBox.hide(); Ext.Msg.alert( "提示" , "儲存完畢！" ); }, 3000); });

效果展示：

六、基本的等待對話框

這裡示範基本的等待對話框的實作方式。

[Js]

?

1 2 3 4 5 6 7 8 9

Ext.get( 'bt6' ).on( 'click' , function () { Ext.MessageBox.wait( "詳細資訊内容" , "标題" , { interval: 100       //進度條加載速度 }); setTimeout( function () { Ext.MessageBox.hide(); Ext.Msg.alert( "提示" , "完畢！" ); }, 35000); });

效果展示：