ExtJS 布局-Absolute布局（Absolute layout）
2024-08-28 13:08:22
更新记录：
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
}
]
}
最新文章
- JavaScript操作Cookie
- javascript中的弹框
- [outlook]打开以后就自动进入安全模式的解决方法。Outlook start in safe mode.
- Viking Village维京村落demo中的粒子距离消隐
- Props属性
- Java-->类的成员
- 使用C++读取UTF8及GBK系列的文本方法及原理
- crawler spec
- Flex友好提示、警告
- 双缓冲(Double Buffer)原理和使用
- 《python for data analysis》第四章，numpy的基本使用
- web网站css，js更新后客户浏览器缓存问题，需要刷新才能正常展示的解决办法
- 英语口语练习系列-C29-鸟类-辨别身份-断弦的琴
- 面板 JPanel，滚动面板 JScrollPane，文本域JTextArea
- Confluence 6 删除和归档空间
- beta圆桌2！
- AP、路由、中继、桥接、客户端模式之间的区别
- 自动添加 Qt 开发生成的 exe 所需的依赖环境
- CodeFrist、ModelFirst、DatabaseFirst
- Oracle数据库中的优化方案