Ext常用的布局都在Ext.layout下，这里几乎涵盖了所有的布局方式，满足开发者需求。那么我们就其中常用的方式逐一介绍。

Border布局

Border布局是Ext中常用布局方式（经常用到整个页面的总体布局），感觉用的几率很大。在看代码之前先熟悉一种特殊的容器ViewPort，它是对于浏览器视窗的抽象，你可以将它理解为浏览器的可见区域，它将渲染到document.body并自动调整大小，一个页面只能创建一个Viewport。

var pnNorth=new Ext.Panel({
	id:‘pnNorth‘,
	autoWidth:true,
	heigth:80,
	frame:true,
	region:‘north‘,
	html:‘这里放置页头内容‘
});
var pnWest=new Ext.Panel({
	id:‘pnWest‘,
	title:‘菜单项‘,
	width:200,
	heigth:‘auto‘,
	split:true,//显示分隔条
	region:‘west‘,
	collapsible:true
	
});
var pnCenter=new Ext.TabPanel({
	region:‘center‘,
	activeTab:0,
	items:[
		{
			title:‘收件箱‘,
			authHeight:true,
			closable:true,//是否可关闭
			html:‘这里显示所收邮件。。。‘
		}
	]
});
var vp=new Ext.Viewport({
	layout:"border",
	items:[
		pnNorth,
		pnWest,
		pnCenter
	]
});

Column布局

从字面就知道Column布局就是列布局，例如我一个panel中还有两个子panel现在想要左侧显示一个右侧显示一个怎么办？这是可以选择Column将父Panel分为两列，左侧一个右侧一个。

var pnSub1=new Ext.Panel({
	height:300,
	columnWidth:.3,
	html:‘这是子panle1‘
});
var pnSub2=new Ext.Panel({
	height:300,
	columnWidth:.7,
	html:‘这是子panle2‘
});
var pn=new Ext.Panel({
	id:‘pn‘,
	title:‘父Panel‘,
	renderTo:‘divPanel‘,
	width:800,
	height:300,
	layout:‘column‘,
	items:[
		pnSub1,
		pnSub2
	]
});

Fit布局

如果从复杂度来说fit布局应该算是最简单的了，设置是最少的。Fit布局同样也是设置父容器的layout属性，但是子容器不用设置任何相应属性。它的目的就是为了让子容器能够自适应于父容器（用了fit布局子容器设置宽度无效），但是请注意如果父容器有多个子容器，只会显示第一个。

var pnSub1=new Ext.Panel({
	title:"子panel1",
	html:"子panel1（会显示）"
});
var pnSub2=new Ext.Panel({
	title:"子panel2",
	html:"子panel2（不会显示）"
});
var pn=new Ext.Panel({
	renderTo:"divPanel",
	title:"父panel",
	width:800,
	height:200,
	layout:"fit",
	items:[
		pnSub1,
		pnSub2
	]
});

Table布局

Table布局多数用在较为复杂的情况下，想一想做web开发总不能就上面几种简单情况吧，因此也就是说Table布局还是很常用的。当然，但是和其他布局相比其参数设置也稍微一些（不用怕，事实上还是很少的）。

new Ext.Panel({
	title:"父Panel",
	renderTo:"divPanel",					
	width:900,
	height:200,
	layout:"table",
	layoutConfig:{
		columns:3					
	},
	defaults:{
		height:100,
		width:300
	},
	items:[
		{
			html:"第一个子panel(行：1,列：1)",
			rowspan:2,//合并行
			height:200
		},
		{
			html:"第二个子panel(行：1,列：2)",
			colspan:2,//合并列
			width:600
		},
		{
			html:"第三个子panel(行：2,列：1)"
		},
		{
			html:"第四个子panel(行：2,列：2)"
		}
	]
});

Form布局

这个布局是专门为表单而设计的布局方式，当然多数是用在FormPanel中（它也是FormPanel默认的布局方式）。我们前面说过FormPanel但是没有涉及复杂布局，事实实际应用中更多的是较复杂的布局。

new Ext.Panel({
	renderTo:"divPanel",
	title:"这个是Panel",
	width:300,
	height:120,
	bodyStyle:‘padding:10‘,
	layout:"form",
	hideLabels:false,
	labelAlighn:"right",
	defaultType:"textfield",
	items:[
		{fieldLabel:"姓名",name:"name"},
		{fieldLabel:"年龄",name:"age"}
	]
});
new Ext.FormPanel({
	renderTo:"divPane2",
	title:"这个是FormPanel",
	width:300,
	height:120,
	bodyStyle:‘padding:10‘,
	layout:"form",
	hideLabels:false,
	labelAlighn:"right",
	defaultType:"textfield",
	items:[
		{fieldLabel:"姓名",name:"name"},
		{fieldLabel:"年龄",name:"age"}
	]
});

从代码我们也可看出来，区别就是对于Panel我们配置了layout为form，从这也能看出来说FormPanel默认的布局就是form布局，所以对于习惯于用Panel而不习惯用FormPanel的朋友尽管用Panel,但是一定要考虑好提交的问题，如果使用panel的话，要做提交可是要一个个获得控件的值的，而FromPanel则不需要。

Ext.onReady(function(){
	var pnRow1=new Ext.Panel({
		border:false,
		layout:‘column‘,
		items:[
			new Ext.Panel({
				columnWidth:.5,
				layout:‘form‘,
				border:false,
				labelWidth:40,
				labelAlign:‘right‘,
				items:[
					{
						xtype:‘textfield‘,
						fieldLabel:‘姓名‘,
						name:‘uname‘,
						anchor:‘95%‘
					}
				]
			}),
			new Ext.Panel({
				columnWidth:.3,
				layout:‘form‘,
				border:false,
				labelWidth:40,
				labelAlign:‘right‘,
				items:[
					{
						xtype:‘radio‘,
						fieldLabel:‘性别‘,
						boxLabel:‘男‘,
						name:‘sex‘,
						inputValue:‘男‘,
						checked:true,
						anchor:"95%"
					}
				]
			}),
			new Ext.Panel({
				columnWidth:.2,
				layout:‘form‘,
				border:false,
				labelWidth:1,
				items:[
					{
						xtype:‘radio‘,
						boxLabel:‘女‘,
						name:‘sex‘,
						inputValue:‘女‘,
						labelSeparator:‘‘,
						anchor:"95%"
					}
				]
			})
		]
	});
	var pnRow2=new Ext.Panel({
		layout:‘column‘,
		border:false,
		items:[
			new Ext.Panel({
				columnWidth:.5,
				layout:‘form‘,
				border:false,
				labelWidth:40,
				labelAlign:‘right‘,
				items:[
					{
						xtype:‘datefield‘,
						name:‘birthday‘,
						fieldLabel:‘生日‘,
						anchor:‘95%‘
					}
				]
			}),
			new Ext.Panel({
				columnWidth:.5,
				layout:‘form‘,
				border:false,
				labelWidth:40,
				labelAlign:‘right‘,
				items:[
					{
						xtype:‘combo‘,
						name:‘study‘,
						store:[‘专科‘,‘本科‘,‘硕士‘,‘博士‘],
						fieldLabel:‘学历‘,
						anchor:‘95%‘
					}
				]
			})
		]
	});
	var pnRow3=new Ext.Panel({
		layout:‘column‘,
		border:false,
		items:[
			new Ext.Panel({
				columnWidth:.3,
				layout:‘form‘,
				border:false,
				labelWidth:40,
				labelAlign:‘right‘,
				items:[
					{
						xtype:‘checkbox‘,
						name:‘hoby‘,
						inputValue:‘computer‘,
						fieldLabel:‘爱好‘,
						boxLabel:‘计算机‘,
						anchor:‘95%‘
					}
				]
			}),
			new Ext.Panel({
				columnWidth:.3,
				layout:‘form‘,
				border:false,
				labelWidth:1,
				labelAlign:‘right‘,
				items:[
					{
						xtype:‘checkbox‘,
						name:‘hoby‘,
						inputValue:‘football‘,
						boxLabel:‘足球‘,
						labelSeparator:‘‘,
						anchor:‘95%‘
					}
				]
			}),
			new Ext.Panel({
				columnWidth:.4,
				layout:‘form‘,
				border:false,
				labelWidth:1,
				labelAlign:‘right‘,
				items:[
					{
						xtype:‘checkbox‘,
						name:‘hoby‘,
						intputValue:‘tinyTable‘,
						boxLabel:‘乒乓球‘,
						labelSeparator:‘‘,
						anchor:‘95%‘
					}
				]
			})
		]
	});
	
	var pnRow4=new Ext.Panel({//当然这里直接在FormPanel中添加TextField就可以了，因为只有一行，但是为了一致以及对齐方便我这里还是放到了panel中
		layout:‘form‘,
		border:false,
		labelWidth:40,
		labelAlign:‘right‘,
		items:[
			{
				xtype:‘textfield‘,
				name:‘email‘,
				fieldLabel:‘住址‘,
				anchor:‘98%‘
			}
		]
	});
	var pnRow5=new Ext.Panel({
		layout:‘form‘,
		border:false,
		labelWidth:40,
		labelAlign:‘right‘,
		items:[
			{
				xtype:‘htmleditor‘,
				name:‘note‘,
				fieldLabel:‘备注‘,
				height:200,
				anchor:‘98%‘
			}
		]
	});
	
	new Ext.FormPanel({
		renderTo:"divPanel",
		title:"个人信息录入",
		width:600,
		bodyStyle:‘padding:10px‘,
		layout:"form",
		items:[
			pnRow1,
			pnRow2,
			pnRow3,
			pnRow4,
			pnRow5
		]
	});
});