布局和容器

The layout system is one of the most powerful parts of Ext JS. It handles the sizing and positioning of every Component in your application. This guide covers the basics of how to get started with layouts.

布局系统是Ext Js中最强大的部分。它控制着你程序中每个组件的尺寸和位置。本指南涵盖了如何使用布局的基础知识。

容器

一个Ext Js应用程序的界面(UI)是由许多组件构成的(容器是一种能陈放其他组件的特殊组件)，一个基本/典型的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组件并把它渲染到html文档的body标签中，并且使用itmes配置项添加了2个子Panel组件到容器中。

布局

每个容器都有一个布局来管理子组件的尺寸和位置。在本小节中，我们将讨论如何使用特定类型的布局来配置一个容器，并且查看布局系统是如何保持一切同步的。

使用布局

在上面的例子中，我们注意到再我们没有为容器组件Panel定义布局的时候，子Panel组件就好像DOM中的块元素一样是一个接一个排列的。之所以这样，是因为框架的所有容器采用默认布局来自动布局的。自动布局并没有为子元素设置任何的尺寸或位置。假设，我们想让2个子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,
            columnWidth: 0.5
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            columnWidth: 0.5
        }
    ]
});

Ext Js提供了一整套的布局方案来适应几乎我们能想到绝大多数布局。

布局系统是如何工作的

一个容器的布局(Layout)负责其所有的子组件的尺寸和位置的初始化。在框架内部调用容器的doLayout方法来驱使(触发)布局去计算容器的子组件的正确尺寸和位置，并更新DOM。doLayout方法是完全递归的，因此容器的任何子组件的daLayout同样会被调用。这个过程将持续到组件的层次结构的最底端。通常情况下，你并不需要在你的代码中调用doLayout方法，因为框架会自动调用。

每当容器改变尺寸或者子组件的添加、移除，重新布局都会被激活。通常我们都是依靠框架为我们处理布局更新，但是，有的时候我们并不希望框架为我们自动更新布局，而是希望能在一些列操作完成后再触发布局的更新。为了做到这一点，我们在容器中使用一个叫做suspendLayout标记(suspendLayout:true)以阻止由于我们的操作而引起的自动布局(例如添加或者移除项目)。一旦我们完成了我们所有的操作之后，则可以重置suspendLayout(containerPanel.suspendLayout=false;),并且通过手动调用daLayout方法触发重新布局：

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

组件布局

就像一个容器布局一样定义了它的组件项的尺寸和位置一样，一个组件也有一个布局，它定义了其内部的子项的尺寸和位置。