ExtJS Layout 4

明天就要考试了，我到今天还没怎么复习，为什么老是要拖到最后的最后捏?  置之死地而后生，这样刺激。

Border Layout

Feature:

1. Border layout 应该是最具大局观的布局，一般的应用都是 Viewport 嵌 Border， 然后在开始其他的设计。

    Border 布局将将父容器分为5个 region，其中 center region 是必须的，且会自动填充剩余空间。 

    width 只对 east、west region 有效，同理，height 只对 south、north region 有效。

2. layout属性-padding。

3. layout属性-regionWeights:  就我的理解，就是设定4区域交界处的处理方式，显示 weight 值大的区域。（也可以为region设定weight属性，会覆盖）

4. 子元素属性-split: 设定4区域与中心区域的交界是否可以拖拽，会有小箭头出现。

Ext.onReady(function()
{
	Ext.create('Ext.window.Window', 
	{
		autoShow: true,
		width: 700,
		height: 500,
		title: 'Border Layout',
		layout: 
		{
			type:'border',
			padding: 4  ,    // 窗体内边距
			regionWeights: 
			{
				west: 1,
				north: 2,
				south: 4,
				east: 3
			}
		},
		items: 
		[
			{
				title: 'North Region',
				region: 'north',
				height: 100,
				split: true
			},
			{
				title: 'South Region',
				region: 'south',
				height: 100,
				split: true,
			},
			{
				title: 'West Region',
				region:'west',
				width: 200,
				split: true,
				splitterResize : false,		// 让split有形无效，没什么用
				collapsible: true,			// 这是panel的属性，但在 border布局 中很有效
			},
			{
				title: 'East Region',
				region:'east',
				width: 200,
				collapsible: true,			// 和split也有点关系 
			},
			{
				title: 'Center Region',
				region: 'center'
			}
		]
	});
});