ExtJS的容器组件都可以通过设置layout参数来选择布局改变显示风格，
它的有效值有：
absolute：控制位置，accordion：手风琴布局，anchor：控制大小，border：边界式布局，card：卡片布局，column：列布局，fit：填充式布局，form：表单布局，table：表格式布局
一共9种,在这里简单总结一下
absolute：Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用
accordion：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面板都支持展开和折叠。注意：只有Ext.Panels和所有Ext.panel.Panel子项，才可以使用accordion布局。
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout:‘border‘,
items:[{
region: ‘west‘,
width: 200,
layout: ‘accordion‘,
layoutConfig: {
titleCollapse: true,
animate: true, //是否使用动画效果
activeOnTop: false
},
items: [{
title: ‘我的好友‘, //必须加上title参数，accordion布局中没有提供默认标题，不加一定会出错
html: ‘我的好友‘
},{
title: ‘陌生人‘,
html: ‘陌生人‘
},{
title: ‘黑名单‘,
html: ‘黑名单‘
}]
},{
region: ‘center‘,
split: true,
border: true
}]
});
});
anchor：
Anchor布局将使组件固定于父容器的某一位置，试用Anchor布局的子组件尺寸相对于容器的尺寸，即父容器的大小发生变化时，试用Anchor布局的组件会根据规定重新渲染位置和大小。
AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此组件在父容器中所处的位置。
anchor属性为一组字符串，可以使用百分比或者是数字来表示。配置字符串使用空格隔开。
Ext.OnReady(function() {
var panel1 = new Ext.Panel({
title: "panel1",
height: 100,
anchor: ‘-50‘,
html: "高度等于100，宽度=容器宽度-50"
});
var panel2 = new Ext.Panel({
title: "panel2",
height: 100,
anchor: ‘50%‘,
html: "高度等于100,宽度=容器宽度的50%"
});
var panel3 = new Ext.Panel({
title: "panel3",
anchor: ‘-10, -250‘,
html: "宽度=容器宽度-10,高度=容器宽度-250"
});
var win = new Ext.Window({
title: "Anchor Layout",
height: 400,
width: 400,
plain: true,
layout: ‘anchor‘,
items: [panel1, panel2,panel3]
});
win.show();
});
Border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在其items中指定试用region参数为其子元素指定具体位置。注意：north和south部分只能设置高度(height),west和east部分只能设置宽度(width)。north south west east区域变大，center区域就变小了。
参数 split：true 可以调整除了center四个区域的大小。
参数 collapsible：true 将激活折叠功能，title必须设置，因为折叠按钮是出现标题部分的。
center 区域是必须使用的，而且center区域不允许折叠。center区域会自动填充其他区域的剩余空间。尤其在ExtJS4.0中，当制定布局为border时，没有指定center区域时，会出现报错信息。
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: ‘border‘,
items: [
{region:‘north‘,title:"north",height:100},
{region:‘south‘,title:‘south‘,height:100},
{region:‘east‘,title:‘east‘,width:100},
{region:‘west‘,title:‘west‘,width:100},
{region:‘center‘,title:‘center‘}
]
});
});
Ext.onReady(function(){
var navHandler = function(direction){
var wizard = Ext.getCmp(‘wizard‘).layout;
var prev = Ext.getCmp(‘move-prev‘);
var next = Ext.getCmp(‘move-next‘);
//当前显示子面板是靠activeItem来控制的
var activeId = wizard.activeItem.id;
if (activeId == ‘card-0‘) { //显示索引为0的子面板
if (direction == 1) {
wizard.setActiveItem(1);
prev.setDisabled(false);
}
} else if (activeId == ‘card-1‘) {
if (direction == -1) {
wizard.setActiveItem(0);
prev.setDisabled(true);
} else {
wizard.setActiveItem(2);
next.setDisabled(true);
}
} else if (activeId == ‘card-2‘) {
if (direction == -1) {
wizard.setActiveItem(1);
next.setDisabled(false);
}
}
};
var viewport = new Ext.Viewport({
layout:‘border‘,
items:[{
region: ‘west‘,
id: ‘wizard‘,
width: 200,
title: ‘某某向导‘,
layout:‘card‘,
activeItem: 0,
bodyStyle: ‘padding:15px‘,
defaults: {
border:false
},
bbar: [{
id: ‘move-prev‘,
text: ‘上一步‘,
handler: navHandler.createDelegate(this, [-1]),
disabled: true
}, ‘->‘,{
id: ‘move-next‘,
text: ‘下一步‘,
handler: navHandler.createDelegate(this, [1])
}],
items: [{
id: ‘card-0‘,
html: ‘<p>第一步，一共三步</p>‘
},{
id: ‘card-1‘,
html: ‘<p>第二步，一共三步</p>‘
},{
id: ‘card-2‘,
html: ‘<p>第三步，一共三步，最后一步了。</p>‘
}]
},{
region: ‘center‘,
split: true,
border: true
}]
});
});
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout:‘column‘,
items: [{
title: ‘Column 1‘,
columnWidth: .25 //注意items中每个子组件的columnWidth参数为0~1之间的一个小数，标识每个子组件在整体中所占的百分比，总和为1
},{
title: ‘Column 2‘,
columnWidth: .4
},{
title: ‘Column 3‘,
columnWidth: .35
}]
});
});
Ext.onReady(function(){
new Ext.Panel({
title:"父容器",
width:300,
height:300,
layout: ‘fit‘,
renderTo:Ext.getBody(),
items: [{title:"子组件"}]//注意这里只需要一个对象
});
});
Ext.onReady(function(){
var viewport = new Ext.Panel({
layout: ‘form‘,
title: ‘信息‘,
width:300,
autoHeight:true,
renderTo:Ext.getBody(),
labelAlign: ‘right‘,
labelWidth: 50,//设置子组件的fieldLabel的宽度
items: [{
xtype:"textfield",
fieldLabel: ‘名称‘,
name: ‘name‘,
anchor: ‘90%‘
}, {
xtype:"datefield",
fieldLabel: ‘生日‘,
name: ‘birthday‘,
xtype: ‘datefield‘,
anchor: ‘90%‘
},{
fieldLabel: ‘备注‘,
name: ‘desc‘,
xtype: ‘textarea‘,
anchor: ‘90%‘
}]
});
});
Panel布局类有10种：容器布局，自适应布局，折叠布局，卡片式布局，锚点布局，绝对位置布局，表单布局，列布局，表格布局，边框布局
1，Ext.layout.ContainerLayout 容器布局
提供容器作为布局的基础逻辑，通常会被扩展而不通过new 关键字直接创建，一般作为默认布局存在
2，Ext.layout.FitLayout 自适应布局
使用layout:‘fit‘ 将使面板子元素自动充满容器，如果有多个子面板也只会第一个会被显示
3，Ext.layout.AccordionLayout 折叠布局 （很常有哦！！！）
扩展自适应布局，layout:‘accordion‘ 它包含了多个子面板，任何时候都只有一个子面板处于打开状态，每个面板都有展开和收缩的功能
4 ，Ext.layout.CardLayout 卡片式布局 （也很有用的哦！！）
扩展自适应布局，layout:‘card‘ 它包含了多个子面板，只有一个面板处于显示状态，它用来制作向导或标签页，使用setActiveItem来激火面板
5，Ext.layout.AnchorLayout 锚点布局
根据容器的大小为其所包含的子面板进行定位的布局 layout:‘anchor‘ 分为：百分比，偏移，参考边 三种方式的定位
6，Ext.layout.AbsoluteLayout 绝对位置布局
根据面板中配置 x/y 坐标进行定位，layout:‘absolute‘ 坐标值支持使用固定值和百分比两种形式
7，Ext.layout.FormLayout 表单布局
用来管理表单字段的显示，内制了表单布局，提供了表单提交，读取等表单功能，layout:‘form‘
8, Ext.layout.ColumnLayout 列布局
多列风格的布局格式，每一列的宽度都可以通过百分比和数值确定宽度，layout:‘column‘
9, Ext.layout.TableLayout 表格布局
可以指定列数，跨行，跨列，可以创建出复杂的表格布局 layout:‘table‘
10, Ext.layout.BorderLayout 边框布局
该布局包含多个面板，是一个面向应用的UI风格的布局，它包含5个部分：east,south,west,north,center,layout:‘border‘ 通过region来配置面板
viewport的应用：作为浏览器窗口的整个显示部分，其有着panel的功能，但是一定要注意的是一个页面只有一个viewport
原文：http://my.oschina.net/u/1398304/blog/291341