锚点格局（AnchorLayout） _Web前端

锚点布局（AnchorLayout）

Ext.layout.AnchorLayout是根据容器大小为其所包含的子面板进行定位的布局，其xtype值为anchor。

主要配置项：
???? anchorSize：父容器提供
???? anchor：子容器提供

加入到使用anchor布局面板中的子面板都支持一个anchor配置项，它是一个包含两个值的字符串，水平值和垂直值。其有效值：
???? 百分比： 100% 50%
????????? 第1项数值：表示子面板占父容器宽度的百分比
????????? 第2项数值：表示子面板占父容器高度的百分比
????????? 如果只提供一个值则只对子面板的宽度生效，高度保持默认值。

???? 偏移量： -50 -100
????????? 第1项数值：表示子面板到父容器右边缘的偏移量
????????? 第2项数值：表示子面板到父容器下边缘的偏移量
????????? 如果只提供一个值则只对子面板的宽度生效，高度保持默认值。

???? 参考边： r b
????????? 要求容器设置固定的大小或提供相应的anchorSize配置项才会有正确的效果。

new Ext.Panel({
	renderTo: "div2",
	frame: true,
	layout: "anchor",
	title: "锚点布局（AnchorLayout）",
	height: 300,
	width: 500,
	autoScroll: true,
	defaults: {
		bodyStyle: "padding:3px; background-color: #FFFFFF"
	},
	items: [
		{anchor: "50% 30%", title:"嵌套面板1", html:"嵌套面板1"},
		{anchor: "-50 -150", title:"嵌套面板2", html:"嵌套面板2"},
		{anchor: "r b", width: 300, height:100, title:"嵌套面板3", html:"嵌套面板3"}
	]
});