ExtJs的最大特性之一就是可用简单的方法来进行布局。我们可通过合适的类来定义固定布局或非固定布局。比如，我们来为容器内的子组件设置布局时，如没有定义布局，则缺省使用auto布局。auto布局是将子组件在容器内一个接一个的来显示的。
ExtJs中可以用很多布局来安排组件，比如：accordions,cards,columns,table等。
一些常用的布局有：
- 边界布局
- 适应布局
- 卡片布局
- 手风琴布局
- 锚定布局
边界布局
边界布局(border) 将容器空间分成了5个区域：north,south,west,east和center。可以将子组件放在任意区域，但是必须要使用center区域。
Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
width: 600,
height: 400,
title: 'Border Layout',
layout: 'border', //指定为边界布局
items: [{
xtype: 'panel',
title: '南区',
region: 'south', // region
height: 100
},{
xtype: 'panel',
title: '西区',
region:'west', // region
width: 200,
collapsible: true,
layout: 'fit'
},{
title: '中间区域',
region: 'center',
layout: 'fit',
html:'<b>中间区</b>'
}],
renderTo: Ext.getBody()
});
});
适应布局
适应布局(fit)一般用于容器内只有一个组件时。这样组件会占用容器的所有可用空间，当容器改变大小时，组件会跟着容器来适应新的尺寸大小。
如下代码：
Ext.onReady(function(){
var win = Ext.create("Ext.window.Window",{
title: "我的窗体",
width: 200,
height: 200,
layout: "fit",
defaults: {
xtype: "panel",
height: 60,
border: false
},
items: [
{title: "Menu", html: "主菜单"},
{title: "Content", html: "主内容!"}
]
});
win.show();
});
