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。

通常情况下，你不需要配置这个属性，除非你自定义一个组件并且所有的组件都有自己的布局管理器，大部分的组件使用自动布局，但是更多复杂的组件就需要自定义的布局（比如一个拥有头部底部和工具条的面板）。