首页 > 其他分享> 文章详细

ExtJS 布局-Anchor 布局（Anchor layout）

2022-05-30 21:34:44 阅读：214 来源： 互联网

标签：layout xtype title 300 布局 anchor html 100 Anchor

更新记录：
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
        }
    ]
}

标签：layout,xtype,title,300,布局,anchor,html,100,Anchor
来源： https://www.cnblogs.com/cqpanda/p/16328038.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9