其他分享
首页 > 其他分享> > ExtJS 布局-Absolute布局(Absolute layout)

ExtJS 布局-Absolute布局(Absolute layout)

作者:互联网

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

1.说明

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

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实例:绝对布局

image

代码:

{
    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实例:绝对布局

image
代码:

{
    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实例:绝对布局

image
代码:

{
    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