Extjs4布局详解(五)——anchor布局

anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。

AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。

anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如

anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%

anchor:'-300 -200'，表示组件相对于父容器右边距为300，相对于父容器的底部位200

anchor:'-250 20%'，混合模式，表示组件党对于如容器右边为250，高度为父容器的20%

示例代码：

 

Ext.create('Ext.Panel', {    
		width: 500,    
		height: 400,     
		title: "MHZG.NET-AnchorLayout Panel",    
		layout: 'anchor',
		x:60,
		y:80,
		renderTo: Ext.getBody(),    
		items: [{        
			xtype: 'panel',         
			title: '75% Width and 25% Height',        
			anchor: '75% 25%'    
		},{         
			xtype: 'panel',        
			title: 'Offset -300 Width & -200 Height',         
			anchor: '-300 -200'         
		},{        
			xtype: 'panel',         
			title: 'Mixed Offset and Percent',        
			anchor: '-250 30%'    
		}]
	});