【ExtJS 4.x学习教程】（3）布局和容器（Layouts and Containers）

浏览数：16 / 时间：2015年06月09日

作者：周邦涛(Timen)
Email：[email protected]
转载请注明出处: http://blog.csdn.net/zhoubangtao/article/details/27366073

1. 简介

布局系统是Ext JS最强大部分之一。它控制着你应用中每一个组件的大小和定位。本篇文章主要讲述怎么开始使用布局。

2. 容器（Containers）

一个Ext JS应用程序UI是由一系列组件（Component）构成的。一个容器（Container）是一个能够容纳其他组件的特殊组件。一个典型的Ext JS 应用是由多个嵌套的组件构成。

最常用的容器就是Panel。让我们看看Panel怎么作为一个容器（Container）去包含其他组件的：

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%'
        }
    ]
});

我们只创建了一个渲染到document body的Panel，然后使用items添加了两个子Panel到我们的Panel容器中。

3. 布局（Layouts）

每一个容器都有一个布局（Layout）去管理它的子组件的大小和位置。本节中我们主要讨论使用一个特殊的布局去配置一个容器，以及布局系统怎么保持这一切同步的。

3.1 使用布局

在上边的例子中我们并没有为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,
            width: '50%'
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            width: '50%'
        }
    ]
});

Ext JS自带了相当多直接可用的布局方案，几乎能够适用所有你能想象到的布局类型。你可看看Ext JS 4 SDK中的布局例子。

3.2 布局系统是如何工作的

一个容器的布局负责一个容器所有子元素的初始大小和位置。在内部框架会调用容器的doLayout方法去触发布局管理器计算容器的所有子元素的正确大小和位置，然后更新DOM。doLayout方法是递归的，所以容器的任何一个子元素也会调用它们的doLayout方法。这会递归调用到组件树的底部为止。在你的应用程序代码中，你通常从来不会调用doLayout方法，框架会为你自动调用。

当容器被改变大小或者子组件的items被添加或移除一些元素时就会触发重新布局，通常我们可以只依赖框架为我们处理布局的更新，但是有我们想阻止框架自动布局，以便我们可以将多个操作合起来做批处理并且完成后手动触发布局动作。为实现这个功能我们可以在容器上使用suspendLayout标记去阻止当我们执行会触发布局的操作（例如添加或者移除items）时所引起的重新布局动作。当我们做完所有要做的事之后再将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,
    width: '50%'
});
containerPanel.add({
    xtype: 'panel',
    title: 'Child Panel 2',
    height: 100,
    width: '50%'
});
// Turn the suspendLayout flag off.
containerPanel.suspendLayout = false;
// Trigger a layout.
containerPanel.doLayout();

4. 组件布局

就像容器布局定义了它子组件的大小和位置一样，一个组件一样有一个Layout去管理它内部的子元素的大小和布局。组件布局采用componentLayout配置选项进行配置。一般的，你不会使用这个配置，除非你要写的是一个定制的组件，但是所有提供的组件有它们自己的布局管理器，不能满足你的需求。大多说组件采用Auto Layout，但是更复杂的组件需要一个定制化的布局（例如Panel有header，footer和toolbars）