ExtJS 4.2 教程-08：布局系统详解
在这些布局中，我们常用的有Accordion、Border、Column、Fit、Form等。下面我们来看一下具体的用法。
Auto Layout
Auto Layout 是ExtJS 容器的默认布局，当我们定义一个panel的时候，如果没有指定panel的布局，那么它就会使用Auto Layout来组织子元素。
Auto Layout 的用法（查看在线演示）：
Auto Layout 本身不包含任何特殊的布局功能，它只是提供了一种调用子元素布局系统的通道。
Anchor Layout
Anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。
Anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如：
anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%anchor:'-295 -300'，表示组件相对于父容器右边距为295，相对于父容器的底部位300anchor:'-250 10%'，混合模式，表示组件党对于如容器右边为250，高度为父容器的10%Anchor Layout 用法（查看在线演示）：
Absolute Layout 继承自 Anchor Layout，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用。
Absolute Layout 用法（查看在线演示）：
Column 布局用来创建一个多列的布局格式，列宽度可以使用像素值或百分比。
Column布局支持一个columnWidth属性，在布局过程中，使用columnWidth指定每个面板的宽度的百分比，他们的和加起来为1。
columnWidth和width可混合使用，这个时候系统将减去width占用的宽度，然后再根据百分比计算列的宽度。
另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间。
Column Layout 用法（查看在线演示）：
Border 布局将界面分为上下左右中五个区域，分别用north、south、west、east、center来表示，它的每个子项用region指定元素的位置。
虽然Border布局看上去比较麻烦，但用起来却非常简单（查看在线示例）：
Accordion Layout 是将其子元素以手风琴的效果显示。
它的子元素必须是panel，或者panel的子类。
Accordion Layout 的使用非常普遍，我们来一个简单的示例（查看在线示例）：
Card 布局是一种向导试的布局方式，它在显示的时候，本身是没有上一步、下一步按钮的，但提供了上一步、下一步的操作方法，我们需要在界面中添加导航按钮来配合实际的业务需要。
示例代码如下（查看在线示例）：
Fit Layout 是很常用的一种布局，在Fit布局中，子元素将自动填满整个父容器。
在Fit 布局下，对其子元素设置宽度是无效的。如果在Fit 布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。
Fit Layout 示例代码（查看在线示例）：
Form Layout 用来组织表单字段的，Form Layout 下的表单字段会被拉伸到表单的宽度。
示例代码如下（查看在线示例）：
Table Layout 将内容绘制在table标签中，table的列数可以指定，还可以通过设置rowSpan和colSpan来创建复杂的布局。
示例代码如下（查看在线示例）：
HBox Layout 将子元素放在同一水平位置，通过align设置子元素的对齐方式，对齐方式有：
top : 默认的对其方式，顶部对齐middle : 中间对齐bottom : 底部对齐stretch : 拉伸对齐，所有子元素根据父容器的高度拉伸stretchmax : 拉伸对齐，所有子元素根据子元素中最高的高度拉伸示例代码如下（查看在线示例）：
VBox Layout 以垂直的方式组织所有子元素。它的子元素可以通过align属性来设置对齐方式，vbox的对齐方式有：
left : 左对齐，默认对其方式center : 中间对齐right : 右对齐stretch : 以父容器的宽度拉伸对齐stretchmax : 以所有子元素中的最大宽度拉伸对齐示例代码如下（查看在线示例）：
var panel = Ext.create("Ext.panel.Panel", { width: 500, height: 400, title: "VBoxLayout Panel", layout: { type: 'vbox', align: 'center' }, items: [{ xtype: 'panel', title: 'Inner Panel One', width: 250, flex: 2 }, { xtype: 'panel', title: 'Inner Panel Two', width: 250, flex: 4 }, { xtype: 'panel', title: 'Inner Panel Three', width: '50%', flex: 4 }], renderTo: "container"});本文还发布在了ExtJS教程网站起飞网上面，如果转载请保留本段声明，谢谢合作。
更多的ExtJS教程，点击进入>>《ExtJS 教程目录》，持续更新中……
