ExtJS面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)

 

通過此文能學習到如下內容 
1.創建一個簡單的面板 Ext.Panel 
2.製作一個可以拖動的面板 Ext.Panel 
3 .使用選項卡面板 
3.使用Ext.Viewport搭一個簡單佈局(用一個小例子來總結本文所有內容) 

面板是ExtJs控件的基礎，很多控件都是在面板的基礎上擴展的，或者他會與其他控件之間有關係。 
面板由一個工具欄、一個底部工具欄、面板頭部、面板尾部和麪板主區域幾個部分組成。面本類中還提供了面板展開、關閉等功能。並提供了一些可重用的工具按鈕 讓我們靈活的控制面板。面板可以放入其他任何容器中，面板本身也是一個容器，所以面板裏面也可以包含其他組件。面板的類名爲Ext.Panel,其 xtype爲panel。 
看下面一個例子來顯示出面板的各個組成部分：

//普通的面板 
function panel(){ 
    var panel=new Ext.Panel({ 
        renderTo:'panel', 
        title:'面板的頭部', 
        width:400, 
        height:200, 
        html:'<h1>面板的主顯示區域..可包含任何html代碼</h1>', 
        tbar:[{text:'頂部工具欄按鈕'}], 
        bbar:[{text:'底部工具欄'}], 
        buttons:[ 
            { 
                text:'面板底部按鈕', 
                handler:function() 
                { 
                    Ext.Msg.alert('提示','面板底部按鈕的事件！'); 
                } 
            } 
        ] 
    }); 
}

上面的代碼就不做詳細介紹了，特別注意的一點是renderTo:'panel'，這句代碼負責把面板綁定到一個div層裏，panel就是div的ID。

<div id="panel"></div>

代碼執行後會顯示下面的效果：

效果不錯吧！面板中可以有多個工具欄，可以位於面板的頂部或底部，Ext工具欄是由Ext.Toolbar類表示。工具欄可以存放按鈕、文本等內容。而且面板中還提了一些實用的工具欄，可以通過tools配置屬性向面板頭部加入工具欄選項，看下面的案例：

function panel(){ 
    var panel=new Ext.Panel({ 
        tools:[ 
            {id:"save"}, 
            {id:"help"}, 
            {id:"up"}, 
            { 
                id:"close", 
                handler:function(){ 
                    Ext.MessageBox.alert("工具欄按鈕","工具欄的關閉按鈕事件") 
                } 
            } 
        ], 
        renderTo:'panel', 
        title:'面板的頭部', 
        width:400, 
        height:200, 
        html:'<h1>面板的主顯示區域..可包含任何html代碼</h1>', 
        tbar:[{text:'頂部工具欄按鈕'}], 
        bbar:[{text:'底部工具欄'}], 
        buttons:[ 
            { 
                text:'面板底部按鈕', 
                handler:function() 
                { 
                    Ext.Msg.alert('提示','面板底部按鈕的事件！'); 
                } 
            } 
        ] 
    }); 
}

跟普通的面板沒什麼區別，只是多了個tools配置屬性，可以通過ID來設置工具欄選項種類，如果需要給工具欄選項添加事件，則直接配置handler屬性就可以。下面我爲大家貼了一些id的枚舉值：

toggle (collapsable爲true時的默認值) 
close 
minimize 
maximize 
restore 
gear 
pin 
unpin 
right 
left 
up 
down 
refresh 
minus 
plus 
help 
search 
save 
print

上面的東西我也沒有全部測試，如果大家感興趣就自己試一下吧。 
如果我們需要讓這個面板可以拖動，需要加3個配置屬性，改變一處配置。

:88, 
y: 88, 
renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置 
draggable: { 
        insertProxy: false,//拖動時不虛線顯示原始位置 
        onDrag : function(e){ 
               var pel = this.proxy.getEl(); 
             this.x = pel.getLeft(true); 
               this.y = pel.getTop(true);//獲取拖動時panel的座標 
         var s = this.panel.getEl().shadow; 
    }, 
    endDrag : function(e){ 
                  this.panel.setPosition(this.x, this.y);//移動到最終位置 
        } 
}

x與y是設置在屏幕顯示位置，renderTo不需要指定div的id了，直接用Ext.getBody()方法就可以把Panel加載。 
draggable是拖動時設置，onDrag是在拖動時觸發的事件，endDrag是結束拖動時事件。 
效果: 

這樣就可以拖動了，但是會發現在拖動時有一個黑框框，這樣可能有些不美觀了。如果我們需要讓這個黑框隨着移動位置而變化。那麼我們需要在onDrag事件函數中加如下代碼:

if (s) { 
    s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
}

看看拖動例子的全部代碼：

//可以拖動的面板 
function panelDrag(){ 
    var panel=new Ext.Panel({ 
        title: '拖一下看看我動不.', 
        x:88, 
        y: 88, 
        renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置 
        floating: true,//true 
        frame: true,//圓角邊框 
        width: 400, 
        height: 200, 
        draggable: { 
                   insertProxy: false,//拖動時不虛線顯示原始位置 
                  onDrag : function(e){ 
                    var pel = this.proxy.getEl(); 
                       this.x = pel.getLeft(true); 
                       this.y = pel.getTop(true);//獲取拖動時panel的座標 
            var s = this.panel.getEl().shadow; 
            if (s) { 
                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
            } 
            }, 
            endDrag : function(e){ 
                      this.panel.setPosition(this.x, this.y);//移動到最終位置 
                } 
        } 
    }) 
}

Ext.Panel有幾個子類，所以來介紹一下Panel中常見的配置屬性、方法，下面內容是資料中的： 
1.autoLoad：有效的url字符串，把那個url中的body中的數據加載顯示，但是可能沒有樣式和js控制，只是html數據 
2.autoScroll:設爲true則內容溢出的時候產生滾動條，默認爲false 
3.autoShow:設爲true顯示設爲"x-hidden"的元素，很有必要，默認爲false 

4.bbar:底部條，顯示在主體內，//代碼：bbar:[{text:'底部工具欄bottomToolbar'}], 
5.tbar:頂部條，顯示在主體內，//代碼:tbar:[{text:'頂部工具欄topToolbar'}], 
6.buttons:按鈕集合，自動添加到footer中（footer參數，顯示在主體外）//代碼：buttons:[{text:"按鈕位於footer"}] 
7.buttonAlign:footer中按鈕的位置，枚舉值爲："left","right","center",默認爲right 

8.collapsible：設爲true，顯示右上角的收縮按鈕，默認爲false 
9.draggable:true則可拖動，但需要你提供操作過程，默認爲false 

10.html:主體的內容 
11.id：id值，通過id可以找到這個組件，建議一般加上這個id值 
12.width：寬度 
13.height：高度 
13.title:標題 

14.titleCollapse：設爲true，則點擊標題欄的任何地方都能收縮，默認爲false. 

15.applyTo：（id）呈現在哪個html元素裏面 
16.contentEl：（id）呈現哪個html元素裏面，把el內的內容呈現 
17.renderTo：（id）呈現在哪個html元素裏面 

applyTo、contentEl、renderTo三者區別個人理解爲：applyTo和RenderTo綁定到html元素中，contentEl則是html元素到ext組件中去。 
上面說到面板都是綁定在某個html元素中顯示面板，是局部的。Extjs中還有一個可以顯示在整個body中的組件Ext.ViewPort，它會隨着瀏覽器而變化。要注意的是一個頁面中只能存在一個viewport的實例。看下面的代碼

function viewport(){ 
    var view=new Ext.Viewport({ 
        enableTabScroll:true, 
        layout:"fit", 
        items:[ 
            { 
                title:'標題', 
                html:"內容", 
                bbar:[ 
                    {text:"按鈕1"} 
                ] 
            } 
        ] 
    }) 
}

與其它使用方式大同小異，Viewport不需要指定renderTo，Viewport通常用於網站主頁面，Viewport常用佈局有fit、border等，設置layout屬性改變佈局。 
基本的面板我們瞭解了，還有一個很重要的面板TabPanel，這裏用一個小例子做說明，代碼就不解釋了。面板的用法是非常靈活的，我們可以發揮自己的想象力來做出漂亮的選項卡面板和實用的功能。因爲它是可以無限嵌套控件的。

function tabpanel(){ 
    var tabpanel=new Ext.TabPanel({ 
        activeTab:0,    //設置默認選擇的選項卡 
        renderTo:'tabpanel', 
        width:200, 
        height:150, 
        items:[ 
            { 
                title:"第一個選項", 
                html:"第一個的內容" 
            }, 
            { 
                title:"第二個選項", 
                html:"第一個的內容" 
            } 
        ] 
    }); 
}

對待本人用到的東西來做一個小設計。代碼不多做講解，發一下代碼和效果吧

 點擊展開