EXTJS 中 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.application(  
2.         {  
3.             name:'layout_anchor',  
4.             launch:function(){  
5.                 Ext.create(  
6.                     'Ext.panel.Panel',  
7.                     {  
8.                         width:500,  
9.                         height:300,  
10.                         title:'anchor布局',  
11.                         layout:'anchor',  
12.                         x:60,  
13.                         y:80,  
14.                         renderTo:Ext.getBody(),  
15.                         items:[  
16.                                {  
17.                                    xtype:'panel',  
18.                                    title:'第一个',  
19.                                    //表示宽度为父容器的75%，高度为父容器的20%  
20.                                    anchor:'75% 20%'  
21.                                },{  
22.                                    xtype:'panel',  
23.                                    title:'第二个',  
24.                                    //表示相对于父容器右边距为130，相对于父容器下边距为120  
25.                                    anchor:'-130 -120'  
26.                                }  
27.                         ]  
28.                     }  
29.                 )  
30.             }  
31.         }  
32. ) 
    

1. 
   
2. {  
3.                    columnWidth:0.33,  
4.                      layout:'form',  
5.                          items:[{  
6.                   id:'missiontype',  
7.                   name:"mission.missiontype",  
8.                   xtype:'combo',  
9.                   fieldLabel:'任务类型',  
10.                   editable:false,  
11.                   store : gdlxStore,  
12.                   displayField:'gdlx',  
13.                    mode:'local',  
14.                   anchor:'100%',  
15.                   listeners:{  
16.                         'select':function(combo, record,index){  
17.                         dmlxCom.clearValue();   
18.                         if(this.getValue())  
19.                           dmlxStore.load({params:{missionType:this.getValue()}});  
20.                           //gdlxStore.reload();  
21.                                 }  
22.                                     }  
23.          }]  
24.          }  

 ext中许多组件都有anchor这个属性，他一般与布局column一起使用，以文本组件为例：columnWidth的值乘以anchor的值，即为本组件所占的长度。

另外注意：anchor不可与设置长度的属性width同时出现，否则，width属性无效。