ExtJS4 API文檔閱讀（三）——佈局和容器

ExtJS4 API文檔閱讀（三）——佈局和容器

ExtJS4.0佈局和容器（Layouts and Containers）是Ext JS中最強大的部分之一。它負責控制你應用程序中每一個組件的尺寸和定位。本文內容包括瞭如何運用佈局的基礎。

1、容器

一個Ext JS應用程序的圖形用戶界面(UI)是由許多組件（查看組件指南(Components Guide)獲取更多關於組件的信息）構成的。容器是一種能夠容納一些其餘組件的特殊類型組件。

典型的Ext JS應用程序是由一些嵌套的組件構成不一樣的層來組成的。以下圖：

 

最通用的容器就是Panel。讓咱們看下如何建立一個容器以容許一個Panel包含其餘的組件：

 

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 300,
    title: 'Container Panel',
    items: [
        {
            xtype: 'panel',
            title: 'Child Panel 1',
            height: 100,
            width: '75%'
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            width: '75%'
        }
    ]
});

咱們剛剛建立了一個Panel，並把它渲染到DOM的body中，而後咱們使用items配置項添加兩個子Panel到咱們的Panel容器中。

2、佈局

每一個容器都擁有一個佈局來管理它子組件的尺寸和定位。

下面咱們將討論如何使用指定類型的佈局來配置容器，以及佈局系統是如何使每一個組件都保持協調的。

使用佈局：上面例子中咱們沒有爲Panel容器指定佈局。能夠看到子Panel是一個接着一個被放置的，正如DOM中標準的塊元素同樣。

之因此這樣是由於全部容器的默認佈局爲自動佈局。自動佈局並不爲子元素指定任何特殊的定位和尺寸規則。

例如，咱們假定想讓兩個子Panel並排放置，而且每一個佔據父容器寬度的50%，咱們能夠簡單

地使用一個列布局(Column Layout)，經過在父容器中配置layout選項來實現。

代碼：

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 200,
    title: 'Container Panel',
    layout: 'column',
    items: [
        {
            xtype: 'panel',
            title: 'Child Panel 1',
            height: 100,
            width: '50%'
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            width: '50%'
        }
    ]
});

Ext JS擁有一整套可用的佈局，幾乎容納了你能想象到的任何一種佈局。能夠查看佈局的例子(Layout Examples)以瞭解那些佈局是可行的。

佈局系統是如何工做的呢？

父容器的佈局負責其全部子元素的初始定位和尺寸大小。框架內部調用了容器的doLayout方法，
該方法觸發佈局爲父容器的全部子元素計算獲得正確的尺寸和定位並更新DOM。doLayout方法
是遞歸調用的，因此父容器的任何子元素一樣也將會調用它們的doLayout方法。這種調用將持續到到達組件層次的末端。一般你通常不會在你的應用程序代碼中調用doLayout方法，由於框架已爲你調用了。

父容器的改變尺寸時，或當添加或刪除子組件的items時，從新佈局將被觸發。一般，咱們僅依賴框架爲咱們管理以更新佈局，可是有時咱們想阻止框架自動更新佈局，這樣咱們一次能夠批量
地處理多個操做，完成時，咱們手動地觸發佈局。

爲了到達這個目的，咱們在容器中使用延緩佈局(suspendLayout)標誌以阻止它自動佈局，當咱們執行那些一般會觸發佈局的操做時（例如添加或移除items）。

當咱們作完這些操做時，咱們必須把延緩佈局標誌關閉，而且手動地調用容器的doLayout方法以觸發佈局：

 

var containerPanel = Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 200,
    title: 'Container Panel',
    layout: 'column',
suspendLayout: true // Suspend automatic layouts while we do several different things that could trigger a layout on their own
//當咱們作一些能觸發其自動佈局的操做時，保證延緩其能自動佈局。
});
// Add a couple of child items.  We could add these both at the same time by passing an array to add(),
//添加一對子items。咱們能夠經過調用add()並傳遞一個數組一次性添加這兩個子組件，
// but lets pretend we needed to add them separately for some reason.
//可是咱們假定須要分別地添加它們是由於其餘緣由。
containerPanel.add({
    xtype: 'panel',
    title: 'Child Panel 1',
    height: 100,
    width: '50%'
});
containerPanel.add({
    xtype: 'panel',
    title: 'Child Panel 2',
    height: 100,
    width: '50%'
});
// Turn the suspendLayout flag off.
//關閉延緩佈局標誌
containerPanel.suspendLayout = false;
// Trigger a layout.
//觸發佈局
containerPanel.doLayout();

組件佈局

如容器的佈局定義了一個容器如何設定尺寸和定位它的組件items，組件的佈局一樣也定義了
其如何設定尺寸和定位它內部的子items。

組件的佈局經過使用組件佈局(componentLayout)來設置配置選項。通常你不須要使用該配置項，除非你正在編寫一個自定義的組件，由於全部提供的組件其內部元素的大小調整和定位都擁有它們本身的佈局管理器。

大多數組件使用自動佈局(Auto Layout)，可是更多複雜的組件須要自定義的組件佈局方式（例如一個有header，footer，toolbars的Panel）

自此，咱們瞭解了容器及佈局，而且掌握了基本的佈局方式和容器的佈局方法。下章，咱們將詳細介紹組件的一些使用方法。