[翻譯]Ext JS 教程-佈局和容器

佈局系統是ExtJS中一個強大的組成部分。它控制着應用程序的每個組件的尺寸和位置。這個操做手冊包含開始使用佈局的基礎操做。

容器

一個ExtJS應用程序的用戶界面由組件構成（更多關於組件的信息見組件指南）。一個容器是一個可以包含其餘組件的特殊組件。一個典型的ExtJS應用程序幾個層和嵌套的組件構成。

最常使用的容器是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，它把它自身渲染到文檔body中，而且咱們使用了items配置往容器Panel中添加了兩個子Panel。

 

佈局

每個容器用一個佈局（Layout）管理着它的子容器的尺寸和位置。這一部分咱們將討論如何去配置容器使用一個定製的佈局，還有佈局系統是如何保持全部東西都是同步的。

使用佈局

在上面的例子中，咱們沒有定製容器Panel的佈局。請注意子Panel是如何一個接在一個的後面放置的，就像DOM結構中通常的塊元素那樣的。這是由於全部容器的默認佈局是Auto Layout。 Auto Layout 不規定子元素的任何定製的位置或尺寸。讓咱們假設一下，舉個例子，咱們想要咱們的兩個子Panel邊靠邊的放置，每一個都佔據容器寬度的50%——咱們能夠簡單的經過在容器上提供一個佈局配置，使用一個Column 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,
            columnWidth: 0.5
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            columnWidth: 0.5
        }
    ]
});

 

ExtJS 配備了整套的佈局框，能夠適應任何你能夠想象獲得的佈局類型。見 Layout Browser 去獲取一個可能點子。

 

佈局系統是如何工做的

一個容器的佈局對容器的初始化和容器下面全部子組件的尺寸負責。框架內部調用容器的doLayout方法觸發佈局去爲全部容器的子組件計算正確的尺寸和位置，而且更新DOM。doLayout方法是全遞歸的，所以任何容器的子元素也都會讓它們的doLayout方法獲得調用。這樣一直持續到達底部的組件層級。在你的應用程序代碼中，你通常不用去管doLayout（）的調用，由於框架爲代你處理它。

當容器的尺寸被修改，或者一個子組件條目被添加或刪除時時，一個重佈局會被觸發。通常咱們能夠依賴框架去爲咱們處理佈局的更新，可是有時候咱們想去阻止框架自動佈局以便咱們可以在咱們已經準備好之後把全部的操做打包，而且手動的去觸發佈局。爲了要這樣作，咱們使用在容器上面suspendLayout 標示去阻止它進行佈局，而咱們執行（添加或者刪除條目）的操做，當咱們操做完了之後再把 suspendLayout 關掉，而且經過調用容器的 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(),
// but lets pretend we needed to add them separately for some reason.
containerPanel.add({
    xtype: 'panel',
    title: 'Child Panel 1',
    height: 100,
    columnWidth: 0.5
});
containerPanel.add({
    xtype: 'panel',
    title: 'Child Panel 2',
    height: 100,
    columnWidth: 0.5
});
// Turn the suspendLayout flag off.
containerPanel.suspendLayout = false;
// Trigger a layout.
containerPanel.doLayout();

 

組件佈局

就像一個容器佈局定義了一個容器如何去設置它的組件條目的尺寸和位置同樣，一個組件也能夠有一個如何去設置它的子條目的尺寸和位置的佈局（Layout）。組件佈局是使用 componentLayout 配置項來配置的。通常的，除非你須要寫一個定製的組件，裏面全部提供的組件都用他們本身的佈局管理器內部控制元素的尺寸和位置，你將不須要使用這個配置。大部分組件使用Auto Layout，可是更多複雜的組件將須要一個定製的組件佈局（好比一個擁有頭部、尾部和工具條的Panel）。

 

 

 

-------------------

下面是文件來源：

http://docs.sencha.com/extjs/4.2.1/#!/guide/layouts_and_containers