ExtJS 4.2 系列教程导航目录：

• ExtJS 4.2 教程-01：Hello ExtJS
• ExtJS 4.2 教程-02：bootstrap.js 工作方式
• ExtJS 4.2 教程-03：使用Ext.define自定义类
• ExtJS 4.2 教程-04：数据模型
• ExtJS 4.2 教程-05：客户端代理（proxy）
• ExtJS 4.2 教程-06：服务器代理（proxy）
• ExtJS 4.2 教程-07：Ext.Direct
• ExtJS 4.2 教程-08：布局系统详解

更多的ExtJS教程，点击进入>>《ExtJS 教程目录》，持续更新中……

今天我们来对ExtJS 4.2 的布局（Layout）进行一次系统的学习。在ExtJS 4.2中，提供了十几种布局，我们可以在api中看到：

在这些布局中，我们常用的有Accordion、Border、Column、Fit、Form等。下面我们来看一下具体的用法。

Auto Layout

Auto Layout 是ExtJS 容器的默认布局，当我们定义一个panel的时候，如果没有指定panel的布局，那么它就会使用Auto Layout来组织子元素。

Auto Layout 的用法（查看在线演示）：

var panel = Ext.create("Ext.panel.Panel", {
    title: "Auto Layout",
    width: 500,
    height: 400,
    items: [
        { xtype: "panel", title: "第一个子Panel", width: 200, height: 100 },
        { xtype: "panel", title: "第二个子Panel", width: 150, height: 100 },
        { xtype: "textfield", width: 300, fieldLabel: "请输入用户名" }
    ],
    renderTo: "container"
});

Auto Layout 本身不包含任何特殊的布局功能，它只是提供了一种调用子元素布局系统的通道。

Anchor Layout

Anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。

AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。

Anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如：

• anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%
• anchor:'-295 -300'，表示组件相对于父容器右边距为295，相对于父容器的底部位300
• anchor:'-250 10%'，混合模式，表示组件党对于如容器右边为250，高度为父容器的10%

Anchor Layout 用法（查看在线演示）：

var panel = Ext.create("Ext.panel.Panel", {
    width: 500,
    height: 400,
    title: "Anchor布局",
    layout: