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'
}
]
}
)
}
}
)
效果图