ExtJS 布局-Anchor 布局（Anchor layout）

更新记录：

2022年5月30日 发布本篇

1.说明

anchor布局类似auto布局从上到下进行堆叠，但不同的是其可以指定每个元素相对于容器大小的比例。

当调整父容器大小，容器根据指定的规则调整所有子组件的大小。支持数值方式、百分比方式设置比例。

使用百分比示意图

使用数值示意图

2.设置anchor布局方法

在容器中设置

layout: 'anchor'

然后在子组件中设置

anchor: '宽度 高度'

注意：宽度、高度可以指定为 百分比 或 指定整数偏移值。

注意：如果宽度、高度指定为正数，则是表示父容器对应值加上正数。

注意：如果宽度、高度指定为负数，则是表示父容器对应值加上负数（实际为减）。

或者

layout: {
    type: 'anchor'
}

然后在子组件中设置

anchor: '宽度 高度'

注意：宽度、高度可以指定为百分比 或 指定整数偏移值。

注意：如果宽度、高度指定为正数，则是表示父容器对应值加上正数。

注意：如果宽度、高度指定为负数，则是表示父容器对应值加上负数（实际为减）。

3.适合和不适合场景

适合场景：

1.从上到下进行堆叠组件方式的布局。

2.需要设置子组件相对父组件大小的布局。

不适合场景：

1.非从上到下方式的布局。

4.实例

4.1简单设置子组件的anchor

代码：

{
    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'
        }
    ]
}

4.2 设置anchor为负值

代码：

{
    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'
        }
    ]
}

4.3 设置anchor将子组件从上到下堆叠

代码：

{
    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
        }
    ]
}