ExtJS Layout 1

最近在学习《ExtJS4 First Look》，想做些归纳，第二章太难，先搞第三章的。

估计要分6个部分，就是图中的五个分支+Component layout，到时候在说吧。

在此，感谢书的作者（谁来着？感谢是真的），和这位翻译君（肥仔John?）：http://www.cnblogs.com/fsjohnhuang/archive/2013/02/19/2917233.html

Auto Layout

Feature：

1. 容器子元素不随容器大小变化而变化。（当子元素width为百分比时除外）

2. 容器子元素按添加顺序自上到下排列。

3. 一般不用。

Anchor Layout

Feature:

1. 依旧是从上到下的自动排列。

2. 子元素会多出anchor属性。

3. anchor属性的设置：

3.1 正数表示子元素离父容器左内边框、上内边框的距离。（这个就体现不出用该布局的价值了，下同）

3.2  负数表示子元素离父容器右内边框、下内边框的距离。

3.3 百分比表示子元素占父容器宽度、高度的百分比。（建议：别用小数，别用负数，别让和大于1）

Ext.onReady(function()
{
	var panel1 = Ext.create('Ext.panel.Panel', 
	{
		title: 'Panel 1',
		anchor: '50% 50%',
		html: '50% 50%'
	});

	var panel2 = Ext.create('Ext.panel.Panel', 
	{
		title: 'Panel 2',
		anchor: '100% 40%',
		html: '100% 40%'
	});

	var anchor = Ext.create('Ext.window.Window', 
	{
		rendTo: Ext.getBody(),
		title: 'Anchor Layout',
		width: 300,
		height: 300,
		layout: 'anchor',
		items: [panel1,panel2]
	});
	
	anchor.show();
});

Absolute Layout 

Feature:

1. 子容器不再是按添加顺序从上到下依次排列，而以x、y属性为坐标的绝对布局，默认为父容器左上角。

2. 因为是anchor的子集，子容器依旧是可以设置anchor属性。

3. 使用x、y属性后要特别注意，anchor百分比是以子容器左上角和父容器右下角形成的矩形来计算的。

Ext.onReady(function()
{
	var panel1 = Ext.create('Ext.panel.Panel', 
	{
		title: 'Panel 1',
		anchor: '50% 50%',
		html: '0 0 
 50% 50%',
	});
	
	var panel2 = Ext.create('Ext.panel.Panel', 
	{
		title: 'Panel 2',
		anchor: '100% 100%',
		html: 'center 
 100% 100%',
		x: '50%',	// 坐标也可用百分比
		y: '50%'
	});
	
	var absolute = Ext.create('Ext.window.Window', 
	{
		rendTo: Ext.getBody(),
		title: 'Absolute Layout',
		width: 300,
		height: 300,
		layout: 'absolute',
		items: [panel1,panel2]
	});
	
	absolute.show();
});