Extjs4----anchor布局

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

用anchor布局时，用anchor属性来配置组件在父容器中的位置

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

Ext.application(
		{
			name:'layout_anchor',
			launch:function(){
				Ext.create(
					'Ext.panel.Panel',
					{
						width:500,
						height:300,
						title:'anchor布局',
						layout:'anchor',
						x:60,
						y:80,
						renderTo:Ext.getBody(),
						items:[
						       {
						    	   xtype:'panel',
						    	   title:'第一个',
						    	   //表示宽度为父容器的75%，高度为父容器的20%
						    	   anchor:'75% 20%'
						       },{
						    	   xtype:'panel',
						    	   title:'第二个',
						    	   //表示相对于父容器右边距为130，相对于父容器下边距为120
						    	   anchor:'-130 -120'
						       }
						]
					}
				)
			}
		}
)

效果图