第 5 章 雀躍吧！超脫了一切的彈出視窗

5.1. 呵呵~跳出來和縮回去總給人驚艷的感覺。

 



瀏覽器原聲的alert()，confirm()，prompt()顯得如此寒酸，而且還不能靈活配置，比如啥時候想加個按鈕，刪個按鈕，或者改改按下按鈕觸發的事件了，都是難上加難的事情。



既然如此，為何不同ext提供的對話框呢？那麼漂亮，那麼好配置，可以拖啊，可以隨便放什麼東西，在裡邊用啥控件都可以，甚至放幾個tab亂切換呀，連最小化視窗的功能都提供了。哈哈，神奇啊，完全可以讓alert退役了。

5.2. 先看看最基本的三個例子

 



嘿嘿，為了加深認識，還是先去看看examples下的例子吧。1.x在dialog目錄下。2.0在message-box目錄下。

5.2.1. Ext.MessageBox.alert()

 



Ext.MessageBox.alert('標題', '內容', function(btn) {

    alert('你剛剛點擊了 ' + btn);

});



現下可以透過第一個參數修改視窗的標題，第二個參數決定視窗的的內容，第三個參數是你關閉按鈕之後（無論是點ok按鈕還是右上角那個負責關閉的小叉叉），就會執行的函數，嘿嘿，傳說中的回調函數。

5.2.2. Ext.MessageBox.confirm()

 



Ext.MessageBox.confirm('選擇框', '你到底是選擇yes還是no？', function(btn) {

    alert('你剛剛點擊了 ' + btn);

});



選擇yes或者是no，然後回調函數裡可以知道你到底是選擇了哪個東東。

5.2.3. Ext.MessageBox.prompt()

 



Ext.MessageBox.prompt('輸入框', '隨便輸入一些東西', function(btn, text) {

    alert('你剛剛點擊了 ' + btn + '，剛剛輸入了 ' + text);

});



隨便輸入幾個字，然後點按鈕，它會告訴你輸入了些什麼東西

5.3. 如果你想的話，可以控制得更多

 

5.3.1. 可以輸入多行的輸入框

 



Ext.MessageBox.show({

    title: '多行輸入框',

    msg: '你可以輸入好幾行',

    width:300,

    buttons: Ext.MessageBox.OKCANCEL,

    multiline: true,

    fn: function(btn, text) {

        alert('你剛剛點擊了 ' + btn + '，剛剛輸入了 ' + text);

    }

});



其實只需要show，我們就可以構造各種各樣的視窗了，title代表標題，msg代表輸出的內容，buttons是顯示按鈕，multiline告訴我們可以輸入好幾行，最後用fn這個回調函數接受我們想要得到的結果。

5.3.2. 再看一個例子唄

 



可能讓我們對show這個方法的理解更深



Ext.MessageBox.show({

    title:'隨便按個按鈕',

    msg: '從三個按鈕裡隨便選擇一個',

    buttons: Ext.MessageBox.YESNOCANCEL,

    fn: function(btn) {

        alert('你剛剛點擊了 ' + btn);

    }

});



我相信buttons這個參數是一個數組，裡邊的這個參數絕對了應該顯示哪些按鈕，Ext.MessageBox給我們提供了一些預先定義好的組合，比如YESNOCANCEL,OKCANCEL，可以直接使用。

5.3.3. 下一個例子是進度條

 



實際上只需要將progress這個屬性設定為true，對話框裡就會顯示個條條。



Ext.MessageBox.show({

    title: '請等待',

    msg: '讀取數據中',

    width:240,

    progress:true,

    closable:false

});



看到進度條了吧，不過它可不會自動滾啊滾的，你需要調用Ext.MessageBox.updateProgress讓進度條發生變化。



另外多說一句，closable: false會隱藏對話框右上角的小叉叉，這樣咱們就不能隨便關掉它了。



現下讓咱們加上更新進度條的函數，使用timeout定時更新，這樣咱們就可以看到效果了。呵呵~效果真不錯，這樣咱們以後就可以使用進度條了。



var f = function(v){

    return function(){

        if(v == 11){

            Ext.MessageBox.hide();

        }else{

            Ext.MessageBox.updateProgress(v/10, '正在讀取第 ' + v + ' 個，一共10個。');

        }

   };

};

for(var i = 1; i < 12; i++){

   setTimeout(f(i), i*1000);

}



5.3.4. 動畫效果，跳出來，縮回去

 



超炫效果，讓對話框好像是從一個按鈕跳出來的，關閉的時候還會自己縮回去。你可以看到它從小變大，又從大變小，最後不見了。實際上的配置缺非常簡單，加一個animEl吧。讓我們看看上邊那個三個按鈕的例子會變成什麼樣子。



Ext.MessageBox.show({

    title:'隨便按個按鈕',

    msg: '從三個按鈕裡隨便選擇一個',

    buttons: Ext.MessageBox.YESNOCANCEL,

    fn: function(btn) {

        alert('你剛剛點擊了 ' + btn);

    },

    animEl: 'dialog'

});



animEl的值是一個字元串，它對應著html裡一個元素的id，比如

。指定好了這個，咱們的對話框才知道根據哪個元素播放展開和關閉的動畫呀。



只需要這樣，咱們就得到動畫效果，嘿嘿，截不到動畫效果的圖，大家自己去看吧。



以上的例子在examples裡都可以找到，不過咱們也提供了一份自己的例子，1.x在lingo-sample/1.1.1/05-01.html。2.0在lingo-sample/2.0/05-01.html。



好消息是，這部分的api沒有什麼改動。不過表現形式上有些差別，如果像我在例子裡寫的那樣，一次生成N個MessageBox，只能顯示最後一個對話框。



不過在1.x裡明顯有一些數據同步的問題，1.x裡的updateProgress甚至可以影響其他對話框的msg，以及可以關閉最後那個對話框。2.0裡至少是好的。

5.4. 讓彈出視窗，顯示我們想要的東東，比如表格

 



2.0需要window來完成這個任務，1.x版的BasicDialog稍後加上。

5.4.1. 2.0的彈出表格哦

 



稍微說一下window咋用呢？其實看起來跟MessageBox差不多啦，只是可以在裡邊隨便放東西，現下先看個單純的例子。



var win = new Ext.Window({

    el:'window-win',

    layout:'fit',

    width:500,

    height:300,

    closeAction:'hide',



    items: [{}],



    buttons: [{

        text:'按鈕'

    }]

});

win.show();



首先要講明的是，這個window需要一個對應的div呀，就像el對應的'window-win'一樣，這個div的id就應該等於'window-win'，然後設定寬和高，這些都很明朗。



其次，需要設定的是佈局類型，layout:'fit'說明佈局會適應整個window的大小，估計改變大小的時候也要做附應的改變。



closeAction:'hide'是一個預設值，簡單來說就是你用滑鼠點了右上角的叉叉，會執行什麼操作，這裡就是隱藏啦。問為啥是隱藏？因為，因為預設啦，乖，背下來撒。



items部分，嘿嘿~就是告訴咱們的window裡要有什麼內容啦。這裡放表格，放樹形，吼吼。



buttons裡設定在底端顯示的按鈕。我們就為了試一下，弄了一個按鈕，但是按了沒回應，嘿嘿。



最後調用一下show()，讓視窗顯示出來。



看一下截圖啦，更直觀。



中間的空白就是items:[{}]的傑作，預設{}會成為一個Ext.Panel，咱們什麼都沒定義，裡邊自然什麼都沒有。當然500*300不會只有這么大，但是為了讓圖片小一點兒，我把它拖下了，嘿嘿~自動支援的修改大小效果，帥吧？



例子超簡單，見lingo-sample/2.0/05-02.html。

5.4.2. 向2.0的window裡加表格

 



唉，地方都劃出來了，弄個表格放進去就好了唄。



首先弄一個grid，超簡單那種。我是直接把第二章的例子給copy了過來，嘿嘿，表格還是那個表格喲。



有了表格，直接扔到window裡，然後ok，哈哈~效果如下︰



看到沒？表格出來了，如果想加分頁條什麼的，只管動手，別怕傷到視窗。



現下回頭讓我們看看，需要注意些什麼。



   1.



      第一，grid不用調用render()了，只要加入了window，在win.show()的時候，會自動渲染裡邊的組件。

   2.



      第二，html裡，要把grid對應的div寫到window的div裡面，巢狀關係。





   3.



      第三，如果還不知道怎么把grid放進window裡，我給你看下代碼。



      var win = new Ext.Window({

          el:'window-win',

          layout:'fit',

          width:500,

          height:300,

          closeAction:'hide',



          items: [grid],



          buttons: [{

              text:'按鈕'

          }]

      });



      看到items:[grid]了嗎？就這么簡單喲。



好了，具體例子在lingo-sample/2.0/05-03.html。敬請大家繼續關注。

5.5. 更進一步撒。

 



希望上邊的那些足夠了，如果不夠，咱們還有更厲害的，如果你看了examples裡的例子，就知道裡邊還有更複雜的對話框，你甚至可以在裡邊用各種佈局。