佈局處理說明 - border , fix, vbox, hbox - 版面

目的: 1>最常用的邊框布局——Border 
    2>最簡單的布局——FitLayout
    3>表單專用的布局——FormLayout
    4>BoxLayout——VBox
    5>BoxLayout——HBox

處理說明:

1>最常用的邊連結測試框布局——Border

該布局把容器分為東、南、西、北、中五個區域,分別由east、south、west、north、center表示。我們需要在items中使用region參數來給它定位。

註意：north和south部分只能設置高度（height），west和east部分只能設置寬度（width）。center區域必須有，且它的大小是在其他4個部分設置好以後自動計算出來的，所以不能為它指定寬度值或高度值。

Ex:var borderPanel = new Ext.Panel({

        renderTo: 'borderDiv',
        layout: 'border',
        tltle: 'Border Layout',
        width: 1000,
        height: 800,
        defaults: {
            collapsible: true, // 支持該區域的展開和折疊
            split: true, // 支持用戶拖放改變該區域的大小
            bodyStyle: 'padding:15px'
        },
        items: [{
            title: 'Footer-s',
            region: 'south',
            height: 100,
            minSize: 75,
            maxSize: 250,
            html: '這是南邊區域 south'

        }, {
            titlr: 'Main Content-c',
            region: 'center',
            collapsible: false,
            html: '這是中間區域 center'
        }, 

2>最簡單的布局——FitLayout

簡介：也稱“自適應布局”。子元素將自動填滿整個父容器。
註意：在fit布局下，對其子元素設置寬度是無效的。如果在fit布局中放置了多個組件，則只會顯示第一個子元素。

var fitPanel = new Ext.Panel({
        renderTo: 'fitDiv',
        layout: 'fit',
        width: 500,
        height: 300,
        items: [{
            title: 'Fit Panel',
            html: '111111111111'
        }]
    });

3>表單專用的布局——FormLayout

簡介：也稱“表單布局”。是一種專門用於管理表單中輸入字段的布局,這種布局在程序中主要用於創建表單字段或表單元素使用。
對於習慣於用 Panel 而不習慣用 FormPanel 的朋友盡管用Panel,但是一定要考慮好提交的問題，如果使用 panel 的話，要做提交可是要一個個獲得控件的值的，
而 FromPanel 則不需要。

var formPanel = new Ext.FormPanel(

{ renderTo: 'formDiv', 

   width: 500, 

   height: 300, 

   labelWidth: 80, 

   defaultType: 'textfield',
   frame: true,

}

4>BoxLayout——HBox

簡介：也稱“豎直布局”。vertical box ，垂直方向的分行顯示。

它的 item 有一個 flex 屬性，其值越大，對應的組件就會占據越大的空間。

var vboxPanel = new Ext.Panel({
        renderTo: 'vboxDiv',
        layout: {
            type: 'vbox',
            align: 'stretch' //拉伸使其充滿整個父容器
        },
        width: 500,
        height: 300,
        items: [{
            title: 'panel-1', html: 'flex:1', flex: 1
        }, {
            title: 'panel-2', html: 'height:150', height: 150
        }, {
            title: 'panel-3', html: 'flex:2', flex: 2
        }]
    });</span>

5>BoxLayout——HBox

簡介：也稱“水平布局”。horizontal box ，水平方向的分列顯示。和 vbox 類似，有 flex 屬性。
ar hbox = new Ext.Panel(

{
renderTo: 'hboxDiv', 

 layout: { type: 'hbox', align: 'stretch' }, 

 width: 500, 

 height: 300, items: [

{ title: 'panel-1', html: 'flex:1', flex: 1 }, 

{ title: 'panel-2', html: 'height:150', width: 150 }, 

{ title: 'panel-3', html: 'flex:2', flex: 2 }] })

</span>