ext学习_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}
		] 
	});
});

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:"右边面板"}
		]
	});
});