Sencha ExtJS 5.x的容器和佈局講解

佈局（layout）系統是ExtJS中較為強大的模組之一，它負責處理每一個元件（component）的大小和位置，下面主要就是講佈局的入門的。

容器：

一個ExtJS的應用程式UI(使用者介面)是由元件(components)組成的，關於元件(component)會有有一個專頁對其講解，容器（container）則是一個特殊的元件，只不過它包含了其它的元件。一個典型的應用程式是由許多容器及其內嵌的多個元件構成的。

佈局和容器的關係圖

最常用的一個元件就是皮膚(panel),下面可以看一下讓這個容器是如何建立幷包含其它元件的：

Ext.create('Ext.panel.Panel', {

    renderTo:Ext.getBody(),

    width: 400,

    height: 300,

    title: 'ContainerPanel',

    items: [

        {

            xtype:'panel',

            title: 'ChildPanel 1',

            height: 100,

            width: '75%'

        },

        {

            xtype:'panel',

            title: 'ChildPanel 2',

            height: 100,

            width: '75%'

        }

    ]

});

在本例子中，我們僅僅是建立了一個皮膚pannel渲染到文件body中了，然後我們使用items屬性給panel容器新增了兩個子panel皮膚。

佈局：

每一個容器都有一個佈局（layout）,它管理容器的子元件的位置和大小，下面會講到如何使用特定的佈局配置一個容器、佈局系統如何讓所有元件保持協調一致的。

使用佈局：

上面的例子中，我們沒有給panel容器指定一個佈局layout，但依舊可以看一下子panel元件是如歌一個一個排列的，很像在DOM檔案中block元素的表現。之所以會這樣顯示是因為所有的容器預設給設定的就是auto

layout自動佈局，它沒有給子元素指定任何的位置和大小。我們假定想要讓兩個子panel肩並肩排列，每個排列均分50%，我們就可以給容器使用column佈局。

Ext.create('Ext.panel.Panel', {

    renderTo:Ext.getBody(),

    width: 400,

    height: 200,

    title: 'ContainerPanel',

    layout: 'column',

    items: [

        {

            xtype: 'panel',

            title: 'ChildPanel 1',

            height: 100,

            columnWidth:0.5

        },

        {

            xtype:'panel',

            title: 'ChildPanel 2',

            height: 100,

            columnWidth:0.5

        }

    ]

});

ExtJS自帶一系列的佈局，能夠滿足你能想象到的所有佈局，可以在佈局專門章節實戰不同型別的layouts佈局。

佈局系統如何起作用

容器的佈局牽涉到容器內所有子元件的位置和大小，框架會在內部呼叫容器的updateLayout方法，次方法就會去計算和校正容器內子元素的大小和位置並更新到DOM。UpdateLayout方法是遞迴的，所以子元素的updateLayout方法也會同樣被呼叫，直到所有子容器都被執行完成才結束。因為框架會自動進行呼叫，所以對開發者來說一般不需要手動呼叫該方法。

當容器進行resize調整大小時或者當子元件新增或刪除的時候

重新佈局(re-layout)就會被觸發， 正常情況下我們不會手動去呼叫這個更新佈局的方法，但是有時候，我們會有一個需求就是先阻止自動更新，等批次元件完成之後再統一呼叫一次更新，為了滿足這個需求，我們可以給容器使用suspendLayout標識阻止自動更新，當批次更新完成的時候再調回標識，並呼叫updateLayout方法進行統一更新:

var containerPanel = Ext.create('Ext.panel.Panel', {

    renderTo:Ext.getBody(),

    width: 400,

    height: 200,

    title: 'ContainerPanel',

    layout: 'column',

    suspendLayout: true// Suspend automatic layouts while we do several different things that couldtrigger 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(),

// but lets pretend we needed to add them separately for somereason.

containerPanel.add({

    xtype: 'panel',

    title: 'Child Panel1',

    height: 100,

    columnWidth: 0.5

});

containerPanel.add({

    xtype: 'panel',

    title: 'Child Panel2',

    height: 100,

    columnWidth: 0.5

});

// Turn the suspendLayout flag off.

containerPanel.suspendLayout = false;

// Trigger a layout.

containerPanel.updateLayout();

元件佈局

跟容器和佈局中定義大小和位置一樣，元件也有一個佈局定義自己內部子元素的大小和位置的，這個配置屬性就是componentLayout。

通常情況下，你不需要配置這個屬性，除非你自定義一個元件並且所有的元件都有自己的佈局管理器，大部分的元件使用自動佈局，但是更多複雜的元件就需要自定義的佈局（比如一個擁有頭部底部和工具條的皮膚）。

作者：蘇生米沿
連結：