ExtJS之 信息提示框 Ext.window.MessageBox

這個組件 繼承自  Ext.window對象,用來生成各種風格的信息提示匡.而 Ext.MessageBox和 Ext.Msg 只是引用了 Ext.window.MessageBox的實例對象.簡化開發

注意:

1.Ext.MessageBox產生的彈出框,並不是一個真正的窗口,而是一個層 (即div),所以無法用窗口捕捉軟件來得到它.

2.Ext.MessageBox信息框 顯示的文本 不僅支持純文本,還支持HTML文本.

  Ext.Msg.alert('提示', '<font color=red>extjs</font>');

效果如圖:

3.Ext.Msg.alert()不會阻塞程序的執行.

 

應用:

Ext.Msg.alert()

參數列表:

Ext.Msg.alert('tishi', 'sssss', callbcak);
         function callbcak(id) { alert(id); }

效果:

當單擊OK后,會 執行 callback函數,那么callback函數的參數 id就是 OK按鈕的id ,它作為唯一的參數傳遞到回調函數中,以供使用.

 

Ext.Msg.confirm()

參數列表:

Ext.Msg.confirm('title','1+1=?',callback);
            function callback(id){alert(id);}

 

效果:

點擊yes和no都會返回不同的id,以供后續判斷點擊哪個按鈕,而做出不同的動作.

Ext.Msg.prompt()

參數列表:

Ext.Msg.prompt('title', '1+1=?', callback, this, true, '默認內容');
           function callback(id, msg) { alert(id + msg); }  //參數 id是按鈕的id,msg是 文本框中得內容

Ext.Msg.wait()

Ext.Msg.wait('waiting...', 'wait',
                {
                  
                    text: '進度',    //進度條文字
                    duration: 3000,   //進度條持續更新3秒
                    interval: 1000,    //每1秒更新一次
                    increment: 3,      //3次更新完畢
                    scope: this,         //回調函數的執行范圍
                    fn: function () { alert('over')}  //更新完畢后調用回調函數

                })

效果:

      

Ext.Msg.show()

這里面有很多參數,這只是其中比較常用的,更多的看 API.

var tem = { title: 'Address',
               msg: 'Please enter your address:',  
               width: 300,    //寬度
               buttons: Ext.Msg.OKCANCEL,   //按鈕類型,和個數
               multiline: true,   //多行
               fn: saveAddress,   回調函數

               icon: Ext.Msg.WARNING   //圖標類型 ,此例為警告
           };

           Ext.Msg.show(tem); // 自定義參數對象
           function saveAddress(id, msg) { alert(id + msg); }

效果:

改變默認彈出框按鈕的文字:

         Ext.MessageBox.msgButtons其實 就是一個數組,按順序保存了四個功能按鈕組件,使用setText來改變按鈕的文字

          //ok
          Ext.MessageBox.msgButtons[0].setText('new OK');
          //yes
          Ext.MessageBox.msgButtons[1].setText('new yes');
          //no
          Ext.MessageBox.msgButtons[2].setText('new no');
          //cancel
          Ext.MessageBox.msgButtons[3].setText('new cancel');

          Ext.Msg.show({ title: 'ss', msg: '1+1=?', width: 300, buttons: Ext.Msg.OKCANCEL });

 

動態更新提示框:

1.改變文字

var tem = {
              title: '22',
              msg: 'asdasd',
              buttons: Ext.Msg.OK,
              modal: true,
              fn: function () {
                  // stop task
                  Ext.TaskManager.stop(task);

              }
          }

          var msgbox = Ext.Msg.show(tem);
          // Ext.TaskManager是一個功能類,用來定制執行程序 ,類似於js 的setInterval()

       //TaskManager准備參數

         var task = {
              run: function () {
                  msgbox.updateText(Ext.util.Format.date(new Date(), 'Y-m-d g:i:s A')); //更新彈出框內的文字
              },
              interval: 1000  //更新頻率為1秒
          };

          Ext.TaskManager.start(task);

 

效果:時間 在變動;

 

2.改變進度條的進度

主要是調用 updateProgress()

參數如下:

代碼暫留.實現失敗.