Ext3.2 布局——anchor layout

anchor layout 是一个有点意思的布局。简单的来说，在使用anchor布局的容器中，它的子组件都有一个anchor配置项，这个配置项表示该组件相对于父组件的位置。

上图是一个使用了anchor的viewport。viewport是一个特殊的容器，用来描述应用的可见区域，它会把自己渲染到document.body，并自动将自己调整到浏览器的大小。而使用了anchor的布局，则子组件会根据自身的anchor配置项的信息，随着浏览器大小改变而改变自己的大小。上述的图形就是再浏览器被压缩之后的大小。代码片段如下。

Ext.onReady(function() {
	Ext.QuickTips.init();
	var viewport = new Ext.Viewport({
				layout : 'anchor',
//				anchorSize : {
//					width : 800,
//					height : 600
//				},
				items : [{
							title : 'Item 1',
							html : 'Content 1',
							width : 500,
							anchor : 'right 20%'
						}, {
							title : 'Item 2',
							html : 'Content 2',
							width : 300,
							anchor : '50% 30%'
						}, {
							title : 'Item 3',
							html : 'Content 3',
							width : 500,
							anchor : '-500 50%'
						}]
			});

});
           

配置项anchor是一个包含两个值的字符串 :水平方向的锚定值和垂直方向的锚定值 (例如:'100% 50%')。 支持如下锚定值类型:

• 百分比 : 1到100之间的任何值，表示一个百分比。 第一个锚定值是组件在容器中所需占有的宽度百分比，第二个是高度百分比。例如:

  // 指定两个值
  anchor: '100% 50%' // 使用容器的全部宽度和1/2高度渲染组件
  // 指定一个值
  anchor: '100%'// 宽度值；高度默认为auto
  			           

• 偏移量 : 任何正数或负数值。 这是一个原始位置，第一个锚定位置是从右侧开始计算的偏移位置，第二个是从底部开始计算的偏移位置。例如:

  // 指定两个值
  anchor: '-50 -100' // 在容器整个宽度的-50像素处，
                     // 整个高度的-100像素处渲染项目。
  // one value specified
  anchor: '-50'      // 锚定值被假定为到右侧的偏移量
                     // 到底部的偏移量将会默认为0
             

• 侧边值 : 可用的值是 'right' (或 'r') 和 'bottom' (或 'b')。 对于拥有特效的对象， 容器必须有一个固定的尺寸，或者有一个在渲染时定义的anchorSize配置值 。
• 混合值 : 如果需要，锚定值也可以是混合型。 例如，如果需要以距离容器右侧边缘50像素，容器高度的75%渲染，使用: 

另外一个参数是anchorSize。默认情况下，AnchorLayout将会根据容器自身的尺寸计算锚定位置。 但是，使用AnchorLayout的容器可以提供一个用来指定锚定位置的 anchorSize配置项。 如果指定了anchorSize， 布局管理器将会把它用作一个虚拟的容器，根据它的尺寸来计算 锚定位置，如果必要，允许容器与调整锚定位置的逻辑无关。这个现象很难解释。尤其当使用anchor:'right '的时候，就更加无法理解它到底是怎么计算组件的宽度的。这仍然是一个问题！