ExtJS4.0 标准布局类

        面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就显得越零乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下11种：

• Auto（自动布局）

Ext.layout.container.Auto自动布局是容器在没有指定布局方式时默认采用的布局类型，它使用原始的HTML文档流来布局子元素，并把布局调用传递给子容器中，对应面板布局配置项（layout）的名称为Auto。

• Fit（自适应布局）

Ext.layout.container.Fit是布局的基础类，对应面板布局配置项（layout）的名称为Fit，Fit布局将使唯一的子元素充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。

• Accordion（折叠布局）

Ext.layout.container.Accordion折叠布局，对应面板布局（layout）配置项的名称为Accordion。该布局会包含多个子面板，任何时候都只有一个子面板处于打开状态，每个子面板都内置了对展开和收缩功能的支持。Accordion布局是在开发中使用较多的布局类，它可以在多个不同的子面板之间切换，适合于表现大量的分组内容或制作可以伸展的分组菜单。

• Card（卡片式布局）

Ext.layout.container.Cart对应面板布局（layout）配置项的名称为Card。该布局会包含多个子面板，任何时候都只有一个子面板处于显示状态，这种布局类经常用来制作向导和标签页。该布局的重点方法是setActiveItem，因为一次只能显示一个子面板，所以切换子面板的唯一途径就是调用setActiveItem方法，它接受一个子面板id或索引作为参数。Card布局并没有提供一个子面板的导航机制，导航逻辑需要开发人员自己实现。

• Anchor（锚点布局）

Ext.layout.container.Anchor是根据容器大小为其所包含的子面板进行定位的布局，对应面板布局（layout）配置项的名称为Anchor。如果容器大小发生变化，所有子面板的位置都会根据规则重新计算，并自动渲染。使用Anchor布局需要注意以下配置项的使用。

         anchorSize（父容器提供）

         anchor（自容器提供）

• Absolute（绝对位置布局）

Ext.layout.container.Absolute对应面板布局（layout）配置项的名称为Absolute。它可以根据子面板中配置的x/y坐标进行定位。

• CheckboxGroup（复选框组布局）

Ext.layout.container.CheckboxGroup复选框组布局，对应面板布局（layout）配置项的名称为CheckboxGroup。它实现了按列布局表单组件Ext.form.CheckboxGroup和Ext.form.RadioGroup的功能。

• Column（列布局）

Ext.layout.container.Column对应面板布局layout配置项的名称为Column。这是一中多列风格的布局样式，每一列的宽度都可以根据百分比或固定值来进行设置，高度允许根据内容进行变化，它支持一个特殊的属性columnWidth，每一个加入到容器中的子面板都可以通过columnWidth配置项指定百分比或使用width配置项指定固定值，来确定列宽。

width配置项是以像素为单位的固定宽度，必须是大于或等于1的数字。columnWidth配置项是以百分比为单位的相对宽度，必须是大于0小于1的销售，例如“.25”。

• Table（表格布局）

Ext.layout.container.Table对应面板布局layout配置项的名称为Table。这种布局允许你非常容易地渲染内容到HTML表格中，可以指定列数（columns），跨行（rowspan），跨列（colspan），可以创建出复杂的表格布局。

注意：必须使用配置对象来配置此布局而不能只使用字符串，table布局有columns和tableAttrs两个配置项，其子面板会具有rowspan和colspan两个配置项。

• Border（边框布局）

Ext.layout.container.Border对应面板布局layout配置项的名称为Border。该布局包含多个子面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是：east（东）、south（南）、west（西）、north（北）、center（中）。加入到容器中的子面板需要指定region配置下来告知容器要加入到那个部分，并且该布局还内建了对面板分隔栏的支持。

注意：

1. 任何使用border布局的容器都必须有一个子元素配置为region:'center'占据中心位置，该子元素会充满布局的剩余空间。
2. 任何占据west或east位置的子元素都必须指定初始化宽度、flex值或者百分比字符串，center的flex值为1.
3. 任何占据north或south位置的子元素都必须指定初始化高度、flex值或者百分比字符串，center的flex值为1.
4. Border布局在渲染完毕后不允许动态增加或删除子元素，如果需要必须通过附加的包装容器来操作。

• Box（盒布局）

Ext.layout.container.Box盒布局又分为HBoxLayout（水平盒布局）和VBoxLayout（垂直盒布局）两个子类，该布局通过子元素的flex配置项来划分父容器的空间。