更新记录:
2022年5月30日 发布本篇
anchor布局类似auto布局从上到下进行堆叠,但不同的是其可以指定每个元素相对于容器大小的比例。
当调整父容器大小,容器根据指定的规则调整所有子组件的大小。支持数值方式、百分比方式设置比例。
使用百分比示意图
使用数值示意图
在容器中设置
layout: 'anchor'
然后在子组件中设置
anchor: '宽度 高度'
注意:宽度、高度可以指定为 百分比 或 指定整数偏移值。
注意:如果宽度、高度指定为正数,则是表示父容器对应值加上正数。
注意:如果宽度、高度指定为负数,则是表示父容器对应值加上负数(实际为减)。
或者
layout: {
type: 'anchor'
}
然后在子组件中设置
anchor: '宽度 高度'
注意:宽度、高度可以指定为百分比 或 指定整数偏移值。
注意:如果宽度、高度指定为正数,则是表示父容器对应值加上正数。
注意:如果宽度、高度指定为负数,则是表示父容器对应值加上负数(实际为减)。
适合场景:
1.从上到下进行堆叠组件方式的布局。
2.需要设置子组件相对父组件大小的布局。
不适合场景:
1.非从上到下方式的布局。
代码:
{
xtype: 'container',
width: 1000,
height: 500,
renderTo: Ext.getBody(),
layout: {
type: 'anchor'
},
items: [
{
xtype: 'panel',
title: "anchor: '1500 50'",
html: "anchor: '1500 50'",
width: 300,
anchor: '1500 50'
},
{
xtype: 'panel',
title: "anchor:'50% 70%'",
html: "anchor: '50% 70%'",
anchor: '50% 70%'
},
{
xtype: 'panel',
title: "anchor:'30% 300'",
html: "anchor:'30% 300'",
width: 500,
anchor:'30% 300'
}
]
}
代码:
{
xtype: 'container',
width: 700,
height: 400,
layout: 'anchor',
items: [
{
title: "anchor: '50% 0'",
html: "anchor: '50% 0'",
anchor: '50% 0'
},
{
title: "anchor: '-20 -200'",
html: "anchor: '-20 -200'",
anchor: '-20 -200'
},
{
title: "anchor: '-200 0'",
html: "anchor: '-200 0'",
anchor: '-200 0'
}
]
}
代码:
{
xtype: 'container',
width: 600,
layout: 'anchor',
items: [
{
xtype: 'panel',
title: "anchor: '30%'",
html: "anchor: '30%'",
anchor: '30%',
height: 100
},
{
xtype: 'panel',
title: "anchor: '300'",
html: "anchor: '300'",
anchor: '300',
height: 100
},
{
xtype: 'panel',
title: "anchor: '-300'",
html: "anchor: '-300'",
anchor: '-300',
height: 100
},
{
xtype: 'panel',
title: "anchor: '-100 -300'",
html: "anchor: '-100 -300'",
anchor: '-100 -300',
height: 100
}
]
}
手机扫一扫
移动阅读更方便
你可能感兴趣的文章