ext2.0中layout布局（6）

1.ExtJS一共包含十种布局，常用的布局有border、column、fit、form、card、tabel等布局

column布局：

Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		width:400,
		height:200,
		layout:"column",
		items:[{columnWidth:.5,
		title:"面板1"},
		{columnWidth:.5,
		title:"面板2"}]
	});
});

Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		layout:"column",
		width:500,
		height:100,
		items:[
			{title:"列1",width:100},
			{title:"列2",width:200},
			{title:"列3",width:100},
			{title:"列4"}
		   ]
		}
	);
});

Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		layout:"column",
		width:500,
		height:100,
		items:[
			{title:"列1",columnWidth:.2},
			{title:"列2",columnWidth:.3},
			{title:"列3",columnWidth:.3},
			{title:"列4",columnWidth:.2}
		  ]
		});
});

Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		layout:"column",
		width:500,
		height:100,
		items:[{title:"列1",width:200},
		{title:"列2",columnWidth:.3},
		{title:"列3",columnWidth:.3},
		{title:"列4",columnWidth:.4}
		] 
	});
});

border布局：

Ext.onReady(function(){
	new Ext.Viewport({
		layout:"border",
		items:[
			{region:"north",height:50,title:"顶部面板"},
			{region:"south",height:50,title:"底部面板"},
			{region:"center",title:"中央面板"},
			{region:"west",width:100,title:"左边面板"},
			{region:"east",width:100,title:"右边面板"}
		]
	});
});

Fit 布局：

Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		layout:"fit",
		width:500,
		height:100,
		items:[{title:"子元素",html:"这是子元素中的内容"}
		] 
	});
});

比较上诉和下面的代码的效果：

Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",		
		width:500,
		height:200,
		items:[
		{title:"子元素",html:"这是子元素中的内容"},
		{title:"子元素22",html:"2222222222222222"}
		] 
	});
});

 f orm布局：

Form 布局由类Ext.layout.FormLayout 定义，名称为form，是一种专门用于管理表单中输入字段的布局，

Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		width:300,
		layout:"form",
		hideLabels:false,
		labelAlign:"right",
		height:120,
		defaultType: 'textfield',
		items:[
		{fieldLabel:"请输入姓名",name:"name"},
		{fieldLabel:"请输入地址",name:"address"},
		{fieldLabel:"请输入电话",name:"tel"}
		] 
	});
});

在父容器中还通过hideLabels、labelAlign 等配置属性来定义了是否隐藏标签、标签对齐方式等

Accordion 布局

Ext.onReady(function(){
	new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		width:500,
		height:200,
		layout:"accordion",
		layoutConfig: {
		animate: true
		},
		items:[
			{title:"子元素1",html:"这是子元素1中的内容"},
			{title:"子元素2",html:"这是子元素2中的内容"},
			{title:"子元素3",html:"这是子元素3中的内容"}
		]
	});
});

Table 布局

Ext.onReady(function(){
	var panel=new Ext.Panel({
		renderTo:"hello",
		title:"容器组件",
		width:500,
		height:200,
		layout:"table",
		layoutConfig: {
		columns: 3
		},
		items:[
			{title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100},
			{title:"子元素2",html:"这是子元素2中的内容",colspan:2},
			{title:"子元素3",html:"这是子元素3中的内容"},
			{title:"子元素4",html:"这是子元素4中的内容"}
		] 
	});
});