ExtJS 布局-Absolute布局（Absolute layout）

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

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

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