ExtJS <3> 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Vie...

聲明：本文案例講解摘自資料，部分資料收集自他人博客。  
經過此文能學習到以下內容
       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個配置屬性，改變一處配置。

x: 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:"第一個的內容"
            }
        ]
    });
}

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

function  viewportlayout() {
    var view=new Ext.Viewport({
        enableTabScroll:true,
        layout:"border",
        items:[
            {
                title:'面板',
                html:"沒有美術細胞，佈局比較難看",
                region:"north",
                height:50
            },
            {
                title:'菜單',
                collapsible:true,
                html:"菜單欄",
                region:"west",
                width:200
            },
            {
                xtype:"tabpanel",
                activeTab: 0,
                region:"center",
                items:[
                    {title:"面板1",html:"tab面板1的內容"},
                    {title:"面板2",html:"tab面板2的內容"}
                ]
            }
        ]
    })
}

      基本的面板應用就算說完了。可能有些人認爲文章寫的很基礎，沒辦法，我也是初學，只能寫應用。還沒能去研究ext的源碼。若是各位對文章有什麼很差的地方或者須要改進的地方請留言說明