ExtJS 布局-Absolute布局（Absolute layout）

2022-06-02 21:33:55 阅读：214 来源： 互联网

标签：layout xtype title 布局 height closable true panel Absolute

更新记录：
2022年5月31日发布本篇

1.说明

使用xy配置项设置子组件在父容器中绝对位置，本质是将子组件的CSS的position设置为absolute，然后使用x和y配置项映射到CSS的top和left。

2.设置布局方法

在容器中设置属性

layout: 'absolute'

然后在子组件中使用x和y属性定义绝对定位

x: 12,
y: 20,

或者

在容器中设置属性

layout: {
   type: 'absolute'
}

然后在子组件中使用x、y属性定义绝对定位

x: 12,
y: 20,

3.适合和不适合场景

适合场景：

1.子组件在容器中使用X、Y坐标定位布局。
2.类似CSS的绝对定位。

不适合场景：

1.普通的水平、垂直布局。

4.实例

4.1实例：绝对布局

代码：

{
    xtype: 'container',
    width: 700,
    height: 400,
    layout: 'absolute',
    items: [
        {
            xtype: 'panel',
            title: 'Panel 1',
            x: 12,
            y: 20,
            height: 250,
            draggable: true,
            closable: true,
            constrain: true
        },
        {
            xtype: 'panel',
            title: 'Panel 2',
            x: 200,
            y: 150,
            height: 200,
            draggable: true,
            closable: true,
            constrain: true
        },
        {
            xtype: 'panel',
            title: 'Panel 3',
            x: 400,
            y: 250,
            width: 150,
            height: 100,
            draggable: true,
            closable: true,
            constrain: true
        }
    ]
}

4.2实例：绝对布局

代码：

{
    xtype: 'container',
    width: 700,
    height: 400,
    layout: 'absolute',
    items: [
        {
            xtype: 'panel',
            title: 'Panel 1',
            closable: true,
            x: 12,
            y: 20,
            height: 250,
        },
        {
            xtype: 'panel',
            title: 'Panel 2',
            closable: true,
            x: 200,
            y: 150,
            height: 200,
        },
        {
            xtype: 'panel',
            title: 'Panel 3',
            closable: true,
            x: 400,
            y: 250,
            width: 150,
            height: 100,
        }
    ]
}

4.3实例：绝对布局

代码：

{
    xtype: 'container',
    layout: 'absolute',
    items: [
        {
            xtype:'panel',
            title: "Panel-1",
            width: 600,
            height: 200,
            closable: true,
            draggable: true,
            html: "<h1>this is Panel1</h1>",
            x: 66,
            y: 77
        },
        {
            xtype:'panel',
            title: "Panel22",
            closable: true,
            draggable: true,
            width: 800,
            height: 150,
            html: "<h1>this is Panel2</h1>",
            x: 1000,
            y: 88
        }
    ]
}

标签：layout,xtype,title,布局,height,closable,true,panel,Absolute
来源： https://www.cnblogs.com/cqpanda/p/16328321.html

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

ICode9