ExtJS 4 布局和容器：Layouts、Containers

布局系统，是 Ext JS 中功能最强大的部分之一。系统中的每一个组件在页面上的尺寸和位置，都由该部分负责管理。这篇文档是 Ext JS 布局入门的文档。

Containers

ExtJS 的图形界面，是由组件构成的。容器，是一种特殊的组件，其功能就是包含其他组件。一个典型的 ExtJS 应用由若干层嵌套的组件构成。

最常用容器类组件是 Panel。下面的代码展示了 Panel 作为一个容器如何包含其他的组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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 元素上渲染，里面添加了两个子面板。

Layouts

每个容器类的组件都有一个布局用来管理其内部组件的尺寸和位置。这里，我们要展示一下一个容器如何通过配置来使用某种特定的布局，并且看看布局系统如何保证每个部分都同步。

使用布局

在上面的例子里，我们没有制定最外层 Panel 的布局，所以内部子 Panel 就是一个挨着一个，从上到下顺次排列在外层的 Panel 上面。其布局形式跟一般的 Html 块级元素在页面呈现的布局相似。这在 ExtJS 中，也是一种布局方式，叫做 Auto Layout，该种布局方法，不指定任何子组件的位置和尺寸。假如，我们需要两个子 Panel 并排排列，各占 50％的宽度，我们可以使用 Column Layout 列布局，只要通过指定容器的 layout 属性，就可以做到这一点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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 有全系列的布局方案，可以实现几乎任何你能想象出来的布局。

布局系统的工作原理

一个容器的布局负责初始化所有子组件的位置和属性。框架内部会调用容器的 doLayout 方法，这会触发 Layout 来计算出所有子组件正确的尺寸和位置，并且更新到 DOM。doLayout 方法是递归调用的，所以，所有子组件的 doLayout 方法，也会在那个时候被调用，一直到最底层级的组件为止。你在使用框架的时候，没有必要自己手动调用 doLayout，框架会为你做好这个工作。

当容器被 resize 的时候，会触发容器的 re-layout，或者子组件内部的对象被添加或者删除的时候也会触发这个过程。通常情况下，我们只要依赖 framework 提供的功能来处理布局更新的事宜，但是有些时候，我们可能希望框架不要替我们做这件事情，因为我们可能需要连续操作若干的组件，我们会希望等所有操作完成后，一并重新计算布局信息。这个时候，我们可以用容器的 suspendLayout 标志来阻止自动的 layout，当我们处理完容器内部的组件后，我们要做的工作是取消 suspendLayout，然后手动调用 doLayout 方法。

组件布局

就像容器有布局一样，组件也可以通过指定布局来管理位于其上的控件和对象。组件布局使用 componentLayout 属性来指定。一般情况下，你是不需要指定这个属性的，除非你在自定义组件，因为所有的预定义组件都已经带有了他们各自的布局管理器来里管理位于其内部的元素尺寸和位置。大部分组件使用 Auto Layout，但是复杂的组件需要一个自定义的组件布局，比如 Panel。

Layout 盘点

从这个图里面，我们可以看到组件布局中，只有一种布局就是 Auto，而大部分布局都是在容器布局下面。下面逐一来罗列一下这些布局的用途：

总结

ExtJS 4 给我们提供了丰富的界面布局，帮助我们能够快速简单的创建用户界面。