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 '的時候，就更加無法了解它到底是怎麼計算元件的寬度的。這仍然是一個問題！