02_核心概念--02_布局和容器

布局和容器

布局体系是Ext JS最强有力的部分之一。使用它能调整你程序中每个组件的大学和位置。这篇指南涵盖了布局的入门基础。

容器

一个Ext JS程序的界面是由组件（Components（http://docs.sencha.com/extjs/6.2.1/modern/Ext.Component.html））组成。更多关于组件的信息，请查看组件指南（http://docs.sencha.com/extjs/6.2.1/guides/core_concepts/components.html）。容器是一种能够包含其它组件的特殊类型的组件。典型的Ext JS程序 是由多个嵌套的组件层组成。

最常用的容器是Panel（http://docs.sencha.com/extjs/6.2.1/modern/Ext.panel.Panel.html）。让我们来看一下作为容器的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，并将它渲染到了文档主体上（即html的body部分）。并且，我们用items配置选项将两个子Panel添加到容器Panel中。

布局

每个容器都有一个layout配置选项来管更是它的子组件的大小和位置。在这一节中，我们将讨论如何使用layout配置容器的布局，以及布局系统如何保持所有组件同步。
使用布局

在上面的示例中，我们并没有为容器面板（Panel）声明一个布局。请注意，子面板是一个接一个地依次排列，如同在DOM中的块级元素一样。这种情况的发生是因为所有容器的默认布局是自动布局（http://docs.sencha.com/extjs/6.2.1/modern/Ext.layout.container.Auto.html）。自动布局不会为子组件声明特定的定位和大小规则。例如，让我们假定我们想让两个子面板挨个排列，每一个占容器的50%宽度-我们可以在容器的layout配置项上使用使用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        }    ]});

Ext JS有一套完整的布局体系，包含了几乎你能想到的任何一种布局。你可以查看Kitchen Sink布局章节（http://dev.sencha.com/ext/5.0.0/examples/kitchensink/#layouts）来浏览运行中的不同布局。

布局的运行原理

一个容器的布局负责它所有子组件的初始位置和大小。在框架内部，通过调用容器的updateLayout方法来触发布局计算并调整容器子组件的大小和位置，并更新DOM。updateLayout方法是递归调用的，所以容器的子组件也会各自调用它们自己的updateLayout方法。方法调用将会一直持续到组件架构体系的最底层。在程序中，你不需要调用updateLayout()方法，因为框架将会帮你处理。

容器的大小被调整或者有新的子组件被添加或删除时，容器将重新布局。一般情况下，我们只要让框架自动为我们更新布局即可。但有时，我们需要阻止框架的自动布局，以使我们可以将多个操作打包到一起，然后当我们准备好后再触发布局的更新。我们可以大我们的容器里使用suspendLayout（http://docs.sencha.com/extjs/6.2.1/modern/Ext.container.Container.html#cfg-suspendLayout）标记来阻止自动更新布局，特别是当我们做一些可以触发布局更新的操作时（例如：增加或删除子组件）。当我们完成所有操作后，我们就可以关掉suspendLayout标记，然后通过调用容器的updateLayout方法手动触发布局的更新：

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.updateLayout();

组件布局

如同容器布局定义了容器如何调整它里面组件项的大小和位置，组件也有一个布局项定义了它怎样调整它的子项的大小和位置。组件布局通过使用componentLayout配置选项进行配置。

一般情况下，你不需要使用配置项，除非你写的是自定义的组件，因为所有的里面的组件都有它们自己的布局管理器。大多数的组件使用自动布局，但更复杂的组件将一个自定义的组件布局（例如有hader，footer和boolbar的Panel）。