Ext.MessageBox
1
//Ext.MessageBox.alert()
2
Ext.MessageBox.alert('標題','內容',function(btn)
{
3
alert('你剛剛點擊了' + btn);
4
});
5
6//Ext.MessageBox.confirm()
7Ext.MessageBox.confirm('選擇框','你到底是選擇Yes還是No?', function(btn) {
8 alert('你剛剛點擊了' + btn);
9});
10
11//Ext.MessageBox.prompt()
12Ext.MessageBox.prompt('輸入框','隨便輸入一些東西', function(btn,text) {
13 alert('你剛剛點擊了' + btn + ", 剛剛輸入了" + text);
14});
對話框的更多配置
1//可以輸入多行的輸入框
2Ext.MessageBox.show({
3 title:'多行輸入框',
4 msg:'你可以多輸入好幾行',
5 width:300,
6 buttons:Ext.MessageBox.OKCANCEL,
7 multiline:true,
8
fn:function(btn,text){
9 alert('你剛剛點擊了' + btn + ", 剛剛輸入了" + text);
10
}
11});
12
13//自定義對話框的按鈕
14Ext.MessageBox.show({
15 title:'隨便按個按鈕',
16 msg:'從三個按鈕里隨便選擇一個',
17 buttons:Ext.MessageBox.YESNOCANCEL,
18 multiline:true,
19 fn:function(btn){
20 alert('你剛剛點擊了' + btn);
21 }
22});
Ext.MessageBox中預設的4個按鈕分別是OK，Yes，No，Cancel。如果不使用YESNOCANCEL這種預設變量，也可以直接使用{ok:true, yes:true, no:true,cancel:true}的形式，這樣4個按鈕都會顯示在對話框中。
進度條
1Ext.MessageBox.show({
2 title:'請等待',
3 msg:'讀取數據中',
4 width:240,
5 progress:true,
6 closable:false //隱藏對話框右上角的關閉按鈕，從而禁止用戶關閉進度條
7});
8
9//也可以直接使用Ext.MessageBox.progress()
10Ext.MessageBox.progress('請等待',msg:'讀取數據中');
11
上述的進度狀態時不會發生變化的，我們需要調用Ext.MessageBox.updateProgress()函數，如以下為每秒變化，10秒后隱藏：
1var f = function(v){
2 return function(){
3 if (v == 11) {
4 Ext.MessageBox.hide();
5 } esle {
6 Ext.MessageBox.updateProgress(v/10,'正在讀取第' + v + '個，一共10個');
7 }
8 };
9};
10for (var i = 1 ; i < 12 ; i++) {
11 setTimeout(f(i) , i*1000);
12}
還可以使用一種自動變化的進度條提示框，如Ext.MessageBox.wait('請等待', msg: ' 讀取數據中');
動畫效果
可以為對話框這是彈出和關閉的動畫效果，使用animEl參數指定一個HTML元素，對話框就會依據指定的HTML元素播放彈出和關閉的動畫。
窗口分組
1 <script type="text/javascript">
2var i = 0 , mygroup;
3
4function newWin(){
5 var win = new Ext.Window({
6 title:'窗口'+ i++,
7 width:400,
8 height:300,
9 maximizable:true,
10 manager:mygroup
11 });
12 win.show();
13}
14
15function toBack(){
16 mygroup.sendToBack(mygroup.getActive());
17}
18
19function hideAll(){
20 mygroup.hideAll();
21}
22
23Ext.onReady(function(){
24 mygroup = new Ext.WindowGroup();
25
26 Ext.get("btn").on("click",newWin);
27 Ext.get("btnToBack").on("click",toBack);
28 Ext.get("btnHide").on("click",hideAll);
29});
30 </script>
31
32 <BODY>
33 <input id="btn" type="button" name="add" value="新窗口"/>
34 <input id="btnToBack" type="button" name="btnToBack" value="放到后臺"/>
35 <input id="btnHide" type="button" name="btnHide" value="隱藏所有"/>
36 </BODY>
示例中，所有通過newWind()方法產生的窗口都屬于mygroup窗口組