布局概述
在EXT中，所有的布局都是从Ext.Container开始的，Ext.Container的父类是Ext.BoxComponent。Ext.BoxComponent是一个盒子组件，可以定义宽度，高度和位置等属性。作为子类，Ext.Container也继承了这些功能，更重要的是，Ext.Container可以使用layout和items属性未作内部的子组件进行布局。
事实上，我们经常用来设置布局的子类也只有几个，比如用Ext.Viewport进行页面的整体布局，使用Ext.Panel和Ext.Window进行各种嵌套布局，使用Ext.form.FieldSet和Ext.form.FormPanel为表单进行布局。其余的子类都使用默认的渲染形式，很少进行内部布局。
与Ext.Container相似，所有的布局类也有一个共同的超类Ext.layout.ContainerLayout。凡是继承该超类的子类都可以对Ext.Container和它的子类进行布局定义，这两颗继承树结合在一起便构成了EXT中完整的布局系统。
最简单的布局FitLayout
1
var viewport = new Ext.Viewport(
{
2
layout:'fit',
3 items:[grid]
4
})
它可以自动适应页面大小的变化，填充整个页面。但如果在items中放入两个控件，会发现第二个控件没有任何效果。即FitLayout布局每次只能使用一个子组件。
常用的边框布局BorderLayout
它将整个布局区域分成了东、西、南、北、中5个部分，除了中间区域以外，其他的区域又都是可以省略的。
var viewport = new Ext.Viewport({
layout:'border',
items:[
{region:'north',html:'north'},
{region:'south',html:'south'},
{region:'east',html:'east'},
{region:'west',html:'west'},
{region:'center',html:'center'}
]
});
重复一遍，center是绝对不能省的，否则会报错导致程序中断。
在此布局中，north和south可以通过设置height来设置高度(也只能设置高度)；west和east部分可以通过设置width来设置宽度(也只能设置宽度)；同时，我们可以使用split来允许用户自行拖放以改变某一个区域的大小。如：
1var viewport = new Ext.Viewport({
2 layout:'border',
3 items:[
4 {region:'north',html:'north'},
5 {region:'west',html:'west',width:100,split:true},
6 {region:'center',html:'center'}
7 ]
8})
当然，在使用split属性时，我们也可以搭配minSize和MaxSize属性来控制最小高度和最大高度。
使用collapsible:true激活了区域的折叠功能，这需要搭配title参数一起使用。
制作伸缩菜单的布局----Accordion
1var viewport = new Ext.Viewport({
2 layout:'border',
3 items:[{
4 region:'west',
5 width:200,
6 layout:'accordion',
7 layoutConfig:{
8 titleCollapse:true,
9 animate:true,
10 activeOnTop:false
11
},
12 items:[{
13 title:'第一栏',
14 html:'第一栏'
15 },{
16 title:'第二栏',
17 html:'第二栏'
18 },{
19 title:'第三栏',
20 html:'第三栏'
21 }]
22 },{
23 region:'center',
24 split:true,
25 border:true
26 }]
27});
实现操作向导的布局----CardLayout
CardLayout可以看做是一叠卡片，从上面看起来就像是一张卡片，可以把中间的卡片抽出来，放到最上面，可以每次只能看到一张卡片。
1var viewport = new Ext.Viewport({
2 layout:'border',
3 items:[{
4 region:'west',
5 id:'wizard',
6 width:200,
7 title:'某某向导',
8 layout:'card',
9 activeItem:0,
10 bodyStyle:'padding:15px',
11 defaults:{
12 border:false
13 },
14 bbar:[{
15 id:'move-prev',
16 text:'上一步',
17 handler:navHandler.createDelegate(this,[-1]),
18 disalbed:true
19 },'->',{
20 id:'move-next',
21 text:'下一步',
22 handler:navHandler.createDelegate(this,[1])
23 }],
24 items:[{
25 id:'card-0',
26 html:'<h1>哈哈！<br/>欢迎用咱的向导。</h1><p>第一步，一共三步</p>'
27 },{
28 id:'card-1',
29 html:'<p>第二步，一共三步</p>'
30 },{
31 id:'card-2',
32 html:'<h1>恭喜恭喜，完成了</p>'
33 }]
34 },{
35 region:'center',
36 split:true,
37 border:true
38 }]
39});
40
示例代码实现了大致的逻辑，但控制上下页翻页的代码(handler)未详细给出。
控制位置和大小的布局----AnchorLayout和AbsoluteLayout
AnchorLayout提供了一种灵活的布局方式，即可以为item中的每个组件指定与总体布局大小的差值，也可以设置一个比例使子组件可以根据整体自行计算本身的大小。它为我们提供给了三种配置方式。
第一种方式是使用百分比进行配置，我们可以设置某一个子组件占整体长和宽的百分比。如：
1 var viewport = new Ext.Viewport({
2 layout:'anchor',
3 items:[{
4 title:'panel 1',
5 html:'panel 1',
6 anchor:'50% 50%'
7 },{
8 title:'panel 2',
9 html:'panel 2',
10 anchor:'80%'
11 }]
12 });
第二种方式是直接设置与右侧和底部的边距，如：
1 var viewport = new Ext.Viewport({
2 layout:'anchor',
3 items:[{
4 title:'panel 1',
5 html:'panel 1',
6 anchor:'-50 -200'
7 },{
8 title:'panel 2',
9 html:'panel 2',
10 anchor:'-100'
11 }]
12 });
13});
第三种方式称为side。使用它的前提是：为作为布局整体的父组件和布局内部的子组件都设置好width、height和anchorSize属性。AnchorLayout会记录布局整体与子组件的大小上的差值，为以后调整布局提供依据。
1 var viewport = new Ext.Viewport({
2 layout:'anchor',
3 anchorSize:{width:400,height:300},
4 items:[{
5 title:'panel 1',
6 html:'panel 1',
7 width:200,
8 height:100,
9 anchor:'r b'
10 },{
11 title:'panel 2',
12 html:'panel 2',
13 width:100,
14 height:200,
15 anchor:'r b'
16 }]
17 });
我们为Viewport设置了anchorSize，这是一个包含宽度和高度信息的JSON对象，以此作为以后计算差值的基准。然后在panel 1和panel 2中设置宽度和高度的信息。anchor的设置只有anchor:'r b'一种，这是固定的写法，也可以写成anchor:'right buttom'，两种写法完全相同。
AbsoluteLayout是AnchorLayout的一个子类，继承了AnchorLayout的所有特性。AnchorLayout布局下的子组件都是自上而下竖直排列的，不能控制每个组件的位置，而AbsolutLayout可以通过设置x，y参数达到控制子组件位置的效果。
表单专用的布局FormLayout
FormLayout也是AnchorLayout的一个子类，可以再它里面使用anchor设置宽和高的比例。但是它主要还是用于对表单进行布局。首先要明白一点，Ext.form.FormPanel使用它作为默认的布局方式。也正因为使用了FormLayout布局，我们设置的fieldLabel、boxLabel才能显示出来，而FormLayout里也提供给了一系列的参数来控制这些显示效果。
hideLabels：是否隐藏field的标签
itemCls：表单显示的样式
labelAlign：标签的对齐方式
labelPad：标签空白的像素值
labelWidth：标签宽度
clearCls：清除div渲染的CSS样式
fieldLabel：对应field的标签内容
hideLabel：是否隐藏标签
itemCls：Field的CSS样式
labelSeparator：标签和field之间的分隔，默认是：
labelStyle：标签的CSS样式
分列式的布局ColumnLayout
1var viewport = new Ext.Viewport({
2 layout:'column',
3 items:[{
4 title:'Column 1',
5 columnWidth:.25
6 },{
7 title:'Column 2',
8 columnWidth:.4
9 },{
10 title:'Column 3',
11 columnWidth:.35
12 }]
13});
表格状的布局TableLayout
1 var viewport = new Ext.Viewport({
2 layout:'fit',
3 items:[{
4 title:'Table Layout',
5 layout:'table',
6 defaults:{
7 bodyStyle:'padding:20px'
8 },
9 layoutConfig:{
10 columns:3
11 },
12 items:[{
13 html:'<p>Cell A content</p>',
14 rowspan:2
15 },{
16 html:'<p>Cell A content</p>',
17 colspan:2
18 },{
19 html:'<p>Cell C content</p>'
20 },{
21 html:'<p>Cell D content</p>'
22 }]
23 }]
24 });
25