布局和容器

布局和容器

布局系统是Ext JS的最强大的地区之一。它可以处理的大小和每一个定位在您的应用程序的组件。本指南介绍如何开始布局的基础。

容器

一个Ext JS的应用程序的UI 组件小号（见组件组件指南。一个容器是一个组件，它可以包含其他组件的特殊类型。一个典型的Ext JS的应用程序是由几层嵌套组件

最常用的容器是小组。让我们来看看如何集装箱允许一个面板包含其他组件：

  

  

  

分机。创建（“Ext.panel.Panel”，{

    renderTo：分机。getBody（）

    宽度：400，

    高度：300，

    标题：'货柜小组'，

    项目：[

        {

            的xtype：'小组'，

            标题：“子面板1' ，

            高度：100，

            宽度：'75％'

        }，

        {

            的xtype：'小组'，

            标题：“儿童面板2' ，

            高度：100，

            宽度：'75％'

        }

    ]

}）;

我们刚刚创建了一个面板，呈现本身的文件体，和我们使用的项目配置两个子面板添加到我们的集装箱小组。

布局

每个容器都有一个布局管理的大小和定位其子组件小号。在本节中，我们将讨论如何配置容器使用特定类型的布局，以及如何布局系统保持同步的一切。

使用布局

在上面的例子中，我们没有指定为容器的布局面板。注意孩子如何面板奠定了一前一后，就像正常的块元素将在DOM。这是因为所有容器的默认布局是自动布局。自动布局不指定任何特殊的定位或子元素的大小规则。例如，假设，我们希望我们的2儿童事务委员会以被定位并排侧，并到每个参加了整整50％的容器宽度-我们可以使用1 列布局只需提供一个布局容器上的配置：

  

  

  

分机。创建（“Ext.panel.Panel”，{

    renderTo：分机。getBody（）

    宽度：400，

    高度：200，

    标题：'货柜小组'，

    布局：“一栏”，

    项目：[

        {

            的xtype：'小组'，

            标题：“子面板1' ，

            高度：100，

            宽度：'50％'

        }，

        {

            的xtype：'小组'，

            标题：“儿童面板2' ，

            高度：100，

            宽度：'50％'

        }

    ]

}）;

Ext JS的开箱配备全套的布局，可容纳几乎任何类型的布局，你可以想像。看到布局的例子，得到一个什么是可能的想法。

布局系统是如何工作的

一个集装箱的布局是最初的定位和大小容器的所有儿童负责。内部框架调用容器的doLayout触发布局的方法来计算容器的所有儿童正确的大小和位置，并更新DOM。doLayout方法是完全递归，所以任何容器的儿童也将有自己的doLayout方法以及。这种情况持续下去，直到达到底部组件层次。你通常不会有调用doLayout（）在您的应用程序代码，因为该框架应为您处理。

重新布局调整容器大小时触发，或子组件项目时添加或删除。通常，我们可以依靠的框架来处理更新我们的布局，但有时，我们要防止自动铺设，所以我们可以批量多个操作在一起，然后手动触发布局时，我们就大功告成了框架。要做到这一点，我们使用的suspendLayout容器上的标志，以防止它奠定了，而我们执行我们的业务，通常会触发一个布局（例如添加或删除项目）。当我们所做的一切，我们必须做的就是把suspendLayout标志和手动触发doLayout方法通过调用容器的布局：

  

  

  

 containerPanel = 分机。创建（“Ext.panel.Panel，{

    renderTo：分机。getBody（）

    宽度：400，

    高度：200，

    标题：'货柜小组'，

    布局：“一栏”，

    suspendLayout：真 / /暂停自动布局，而我们做几件不同的事情，可能会引发自己的布局

}）;

/ /添加一个子项的情侣。我们可以通过一个数组添加这些都增加（）在同一时间，

/ /但是让我们假装我们需要添加一些原因，他们分别。

containerPanel。添加（{

    的xtype：'小组'，

    标题：“子面板1' ，

    高度：100，

    宽度：'50％'

}）;

containerPanel。添加（{

    的xtype：'小组'，

    标题：“儿童面板2' ，

    高度：100，

    宽度：'50％'

}）;

/ /关闭suspendLayout标志。

containerPanel。suspendLayout = FALSE ;

/ /触发布局。

containerPanel。doLayout（）;

组件布局

就像一个 Container 的布局定义容器的大小和位置的组件 项目，一个组件也有一个布局，它定义如何，它的大小和位置其内部的子项。组件布局使用的componentLayout的 config选项配置。一般来说，你将不再需要使用这种配置，除非你正在编写一个自定义组件，因为所有需要它们的大小和位置有自己的布局管理器的内部元素所提供的组件。大多数组件使用自动布局，但更复杂的组件将需要一个自定义组件布局（例如，一个小组有页眉，页脚，工具栏）。