ExtJS Panel 基本介紹

一、Panel 是一個特殊的容器，由於他既有容器的特性，又具備本身獨有的特性。

    Panel是一個容器,具備特定的功能和結構組件，使它使可以完美地爲面向應用的用戶界面建立部件。 Panel繼承自Ext.container.Container,能夠設置自身的layout佈局,而且能夠包含子組件。要麼指定Panel的items，要麼動態向Panel中添加Components ，要記得考慮 你但願Panel如何排列這些子元素，而且這些子元素是否須要使用Ext內建的layoutlayout規則調整尺寸。 默認狀況下，Panel使用ContainerLayout自動規則。它簡單地渲染子組件，將它們一個接一個地添加到Container中， 而且再也不進行任何調整尺寸的操做,不然還能夠配置layout來設置panel容器內子組件的大小與位置。

二、面板組件被分爲七個部分，分別是：

標題、工具欄（上下左右）、按鈕工具欄、內容區域

1）標題（title）：標題欄裏不單單是一個文本標題，還能夠添加工具，由於他還有Header功能，能夠在工具去添加工具，好比最小化、最大化等。配置項使用 title:'title' 和 tools:[{xtype:'help'},{xtype:'search'}]

2）工具欄：tbar  bbar lbar rbar ; 分別對應上下左右的工具欄，使用與tools一致

3）按鈕工具欄：buttons或fbar，兩者都是在內容區域與bbar之間顯示工具，還能夠經過buttonAlign來控制按鈕的擺放

4）內容區域：若是單純使用模板方法模式，可使用html配置項，若是做爲容器，最好使用items添加子組件

三、面板的一些重要屬性

1）closeAction：能夠字符串的destroy（默認）或hide；前者是當點擊close關閉按鈕或調用close方法時會徹底銷燬對象，把DOM從文本樹中移除，後者只是隱藏，還可使用show展現出來。

2）bodyCls：面板主體樣式，這個是一個class類名哦

3）bodyStyle：面板主體樣式，這個是一個style配置項

4）bodyPadding：面板主體內邊距，其實就是子組件之間的距離

5）layout：默認自動佈局，能夠設置字符串或layout對象來設置佈局

6）width、height：容器的大小

7）icon：指定一個圖片路徑，設置標題欄的圖標

8）IconCls：一個class名稱，設置標題欄的圖標

4 、tools 工具欄的配置項

1）type：按鈕名稱，諸如 save help search ..........

2）handler：工具點擊時觸發的事件

3）scope：做用域

4）stopEvent：若是爲false表示容許事件進行傳播

5）tooltip：字符串或QuickTips對象，其實就是鼠標放在圖標上時顯示的提示信息

5 、實例

var resultsPanel = Ext.create('Ext.panel.Panel', {
    title: 'Results',
    width: 600,
    height: 400,
    renderTo: Ext.getBody(),
    layout: {
        type: 'vbox',       // 子元素垂直佈局
        align: 'stretch',    // 每一個子元素寬度充滿子容器
        padding: 5
    },
    items: [{               // 指定一個grid子元素
        xtype: 'grid',
        columns: [{header: 'Column One'}],            // 只配置一列顯示，沒有數據
        store: Ext.create('Ext.data.ArrayStore', {}), // 設置一個沒有數據的store
        flex: 1                                       // 佔用容器的1/3高度 (在以 Box 爲佈局中)
    }, {
        xtype: 'splitter'   //一個分割器在兩個子組件之間
    }, {                    // Details 面板做爲一個配置進來的Panel (沒有用xtype指定，默認是 'panel').
        title: 'Details',
        bodyPadding: 5,
        items: [{
            fieldLabel: 'Data item',
            xtype: 'textfield'
        }], // 表單元素(文本域)
        flex: 2             // 佔用容器的2/3高度 (在以 Box 爲佈局中)
    }]
});

參考：

1）ExtJS 權威指南

2）ExtJS4.0 幫助文檔