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

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

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

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

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

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

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

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

示例代码：

 

1. Ext.create('Ext.Panel', {    
2.         width: 500,    
3.         height: 400,     
4.         title: "MHZG.NET-AnchorLayout Panel",    
5.         layout: 'anchor',
6.         x:60,
7.         y:80,
8.         renderTo: Ext.getBody(),    
9.         items: [{        
10.             xtype: 'panel',         
11.             title: '75% Width and 25% Height',        
12.             anchor: '75% 25%'    
13.         },{         
14.             xtype: 'panel',        
15.             title: 'Offset -300 Width & -200 Height',         
16.             anchor: '-300 -200'         
17.         },{        
18.             xtype: 'panel',         
19.             title: 'Mixed Offset and Percent',        
20.             anchor: '-250 30%'    
21.         }]
22.     });