Extjs4----anchor布局

 

Extjs4----anchor布局

2012-09-10 12:08  1166人阅读  评论(0)  收藏  举报

  分类：

 

extjs4（41）   Java Web（25） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

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

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

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

[javascript]  view plain  copy

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. )  

效果图