ExtJS 4.x中的佈局（layouts in ExtJS 4.x）（一）

  1、佈局的來源（ Why we need layout ）

頁面上顯示的各個元素每每是嵌套的，這些元素在頁面上的擺放須要某些元素可以盛放其餘一些元素，所以就有了Container（「容器」，一種特殊組件）和Component（通常組件），Container可以盛放其餘Container和通常的Component。

    這種元素間的關係使得組件呈現層級關係。下圖 展現了 ExtJS4.x 中組件間層級關係一種實例。

    既然組件間呈現層級關係，Container中能盛放其餘Container和Component，那麼怎麼呈現呢？呈現的樣子是什麼？是從左到右一個一個擺放仍是從上到下一個一個擺放？是按照東西南北中來擺放仍是隨意擺放？… 這些就是layout（佈局）的責任範疇了，layout可以設置一個容器中的各個元素怎麼放置。固然，layout不單單在ExtJS中出現，一切圖形界面編程中都涉及它！

2、ExtJS4.x中的佈局簡介（An brief introduction to layout in ExtJS4.x）

    ExtJS4.x爲頁面佈局提供了多種方案，有按照「東西南北中」方位位置來擺放元素的border佈局，也有元素自適應擺放的fit佈局，還有從左到右按列擺放元素的hbox佈局和從上到下按行擺列元素的vbox佈局……ExtJS4.x爲頁面佈局提供了多種解決方案，以下表所示。

名稱	對應的類
absolute	Ext.layout.container.Absolute
accordion	Ext.layout.container.Accordion
anchor	Ext.layout.container.Anchor
auto或autocontainer	Ext.layout.container.Auto
autocomponent	Ext.layout.component.Auto
border	Ext.layout.container.Border
box	Ext.layout.container.Box
card	Ext.layout.container.Card
checkboxgroup	Ext.layout.container.CheckboxGroup
column	Ext.layout.container.Column
container	Ext.layout.container.Container
fit	Ext.layout.container.Fit
form	Ext.layout.container.Form
hbox	Ext.layout.container.HBox
table	Ext.layout.container.Table
ux.center	Ext.ux.layout.Center
vbox	Ext.layout.container.VBox

 

    這17中佈局方案是在長期界面編程中造成的經典方法，咱們應該先學習瞭解各類佈局的功能、特色、使用場合，而後根據本身的需求選擇使用。例如，border佈局適合於將頁面分紅「東西南北中」五部分來擺放元素的場合（固然，沒必要每部分都用到，例如能夠只使用其中的center和south部分），它和java Swing中的border佈局幾乎一致。

       下面以fit、border、hbox、vbox、column這五種佈局來簡單介紹，並配以實例。

1、fit佈局

       fit佈局是最簡單的佈局，只適合於包含單一元素的容器，例如一個panel（面板）只包含另外一個panel。使用fit佈局時，被包含的元素會充滿其父容器。要使用fit佈局，只要在容器中的layout配置中指定‘fit’便可。

 實例代碼：

Ext.create('Ext.panel.Panel', {
    title: 'Fit Layout',
    width: 300,
    height: 150,
    layout:'fit',
    items: {
       xtype: panel, //無關緊要，在Ext.panel.Panel中默認的元素也是panel
       title: 'Inner Panel',   //元素的標題
        html: 'This is the inner panel content',  //內容
        bodyPadding: 20,  //定義padding樣式
        border: false  //panel元素無邊界
    },
    renderTo: Ext.getBody()
});

實例展現圖：

2、border

    border佈局很是豐富，同時也比較複雜。它提供「東西南北中」五部分供盛放元素，使得容器能夠盛放嵌套panel，同時也使得部分與部分之間能夠有工具欄，也可使各部分之間可以關閉（縮至最小）。要使用border佈局，只要在容器中的layout配置中指定‘border’便可。

實例代碼：

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 400,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'South Region is resizable',
        region: 'south',     // 配置放置區域爲south
        xtype: 'panel',
        height: 100,
        split: true,
        margins: '0 5 5 5'  //margins中個數字對應的方位一次是北東南西
    },{
        // xtype: 'panel' implied by default
        title: 'North Region is collapsible',
        region:'north',
        xtype: 'panel',
        margins: '5 5 0 5',
        height: 100,
        collapsible: true,   // 容許收縮
        id: 'north-region-container',
        layout: 'fit'
    },{
        // Ext.panel.Panel中默認元素類型爲xtype:panel
        title: 'West Region is collapsible',
        region:'west',
        xtype: 'panel',
        margins: '5 0 0 5',
        width: 100,
        collapsible: true,
        id: 'west-region-container',
        layout: 'fit'
    },{
        // xtype: 'panel' implied by default
        title: 'East Region is collapsible',
        region:'east',
        xtype: 'panel',
        margins: '5 5 0 0',
        width: 100,
        collapsible: true,
        id: 'east-region-container',
        layout: 'fit'
    },{
        title: 'Center Region',
        region: 'center',//中部區域是必須的，它沒有寬高配置，也不須要
        xtype: 'panel',
        layout: 'fit',
        margins: '5 5 5 5'
    }],
    renderTo: Ext.getBody()
});

實例展現圖：

 

3、hbox

       hbox佈局使得容器中各個元素水平排列，一個挨一個。若是在items中配置元素時指定各個元素的寬度（可使用絕對數字如200，也可使用百分比），則顯示時將按照指定的寬度顯示；若是使用了flex配置，則按照flex比例來顯示寬度；若是沒有指定，則自動使用builtin（內置）規則安排各個元素的寬度。可是在高度上，則只能使用絕對數字而不能使用百分比。在使用hbox時，能夠指定元素align（對齊）規則，top（頂部對齊）、middle（中部對齊）、bottom（底部對齊）、stretch（垂直方向上充滿整個容器）、stretch（垂直方向上按照高度最高的對齊）。

實例代碼：

Ext.create('Ext.Panel', {
    width: 500,
    height: 300,
    title: "HBoxLayout Panel",
    layout: {
        type: 'hbox',     //指定爲hbox佈局
        align: 'stretch'  //指定元素的高將充滿容器的垂直空間
    },
    renderTo: document.body,
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One',
        flex: 2
    },{
        xtype: 'panel',
        title: 'Inner Panel Two',
        flex: 1
    },{
        xtype: 'panel',
        title: 'Inner Panel Three',
        flex: 1
    }]
});

實例展現圖：

 

4、vbox

       與hbox相對，vbox按照垂直方向來擺放元素，其餘屬性與hbox差很少。

實例代碼：

Ext.create('Ext.Panel', {
    width: 400,
    height: 300,
    title: "VBoxLayout Panel",
    layout: {
        type: 'vbox',    //指定爲vbox佈局
        align: 'center'  //指定各元素將中間對齊
    },
    renderTo: document.body,
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One',
        width: 250,
        flex: 2
    },
    {
        xtype: 'panel',
        title: 'Inner Panel Two',
        width: 250,
        flex: 4
    },
    {
        xtype: 'panel',
        title: 'Inner Panel Three',
        width: '50%',
        flex: 4
    }]
});

實例展現圖：

 

    如開頭所述，ExtJS4.x中一共有17中佈局，這裏僅僅介紹了其中的4中，在後面的學習和使用中會繼續更新！

參考：ExtJS 官方文檔http://docs.sencha.com/extjs/4.2.2/中佈局、組件等文檔