ExtJS4 API文档阅读（三）——布局和容器

ExtJS4 API文档阅读（三）——布局和容器

ExtJS4.0布局和容器（Layouts and Containers）是Ext JS中最强大的部分之一。它负责控制你应用程序中每一个组件的尺寸和定位。本文内容包括了如何运用布局的基础。

1、容器

一个Ext JS应用程序的图形用户界面(UI)是由许多组件（查看组件指南(Components Guide)获取更多关于组件的信息）构成的。容器是一种能够容纳一些其余组件的特殊类型组件。

典型的Ext JS应用程序是由一些嵌套的组件构成不一样的层来组成的。以下图：

 

最通用的容器就是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，并把它渲染到DOM的body中，而后咱们使用items配置项添加两个子Panel到咱们的Panel容器中。

2、布局

每一个容器都拥有一个布局来管理它子组件的尺寸和定位。

下面咱们将讨论如何使用指定类型的布局来配置容器，以及布局系统是如何使每一个组件都保持协调的。

使用布局：上面例子中咱们没有为Panel容器指定布局。能够看到子Panel是一个接着一个被放置的，正如DOM中标准的块元素同样。

之因此这样是由于全部容器的默认布局为自动布局。自动布局并不为子元素指定任何特殊的定位和尺寸规则。

例如，咱们假定想让两个子Panel并排放置，而且每一个占据父容器宽度的50%，咱们能够简单

地使用一个列布局(Column Layout)，经过在父容器中配置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拥有一整套可用的布局，几乎容纳了你能想象到的任何一种布局。能够查看布局的例子(Layout Examples)以了解那些布局是可行的。

布局系统是如何工做的呢？

父容器的布局负责其全部子元素的初始定位和尺寸大小。框架内部调用了容器的doLayout方法，
该方法触发布局为父容器的全部子元素计算获得正确的尺寸和定位并更新DOM。doLayout方法
是递归调用的，因此父容器的任何子元素一样也将会调用它们的doLayout方法。这种调用将持续到到达组件层次的末端。一般你通常不会在你的应用程序代码中调用doLayout方法，由于框架已为你调用了。

父容器的改变尺寸时，或当添加或删除子组件的items时，从新布局将被触发。一般，咱们仅依赖框架为咱们管理以更新布局，可是有时咱们想阻止框架自动更新布局，这样咱们一次能够批量
地处理多个操做，完成时，咱们手动地触发布局。

为了到达这个目的，咱们在容器中使用延缓布局(suspendLayout)标志以阻止它自动布局，当咱们执行那些一般会触发布局的操做时（例如添加或移除items）。

当咱们作完这些操做时，咱们必须把延缓布局标志关闭，而且手动地调用容器的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(),
//添加一对子items。咱们能够经过调用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();

组件布局

如容器的布局定义了一个容器如何设定尺寸和定位它的组件items，组件的布局一样也定义了
其如何设定尺寸和定位它内部的子items。

组件的布局经过使用组件布局(componentLayout)来设置配置选项。通常你不须要使用该配置项，除非你正在编写一个自定义的组件，由于全部提供的组件其内部元素的大小调整和定位都拥有它们本身的布局管理器。

大多数组件使用自动布局(Auto Layout)，可是更多复杂的组件须要自定义的组件布局方式（例如一个有header，footer，toolbars的Panel）

自此，咱们了解了容器及布局，而且掌握了基本的布局方式和容器的布局方法。下章，咱们将详细介绍组件的一些使用方法。