更新记录:
2022年6月1日 开始。
2022年6月4日 发布。
使用列布局,可以将容器拆分为特定大小的列,并将子组件放置在这些列中。
可以设置子组件宽度值为: 百分比(相对父容器宽度) 或者 绝对值。
注意:子项组件总是左对齐。
在父容器中设置
layout: 'column'
//或者
layout: {
type: 'column'
}
然后在子组件中使用columnWidth属性设置宽度。
注意:
1.如果设置为百分比,所有子项的columnWidth属性的总和应等于1
2.还可以定义固定宽度。
3.如果子组件宽度同时包含绝对值和百分比,则先减去绝对值再计算百分比。
4.column布局不会管理子组件的高度,最好为父容器设置autoScroll:true
//使用百分比
columnWidth: 0.4,
//使用绝对值
columnWidth: 350,
适合场景:
1.将多个子组件进行按多个列进行布局。
2.部分子组件的宽度为固定值,部分子组件的宽度为相对值。
不适合场景:
代码:
{
xtype: 'panel',
width: 700,
height: 400,
layout: 'column',
autoScroll: true,
items: [
{
xtype: 'panel',
title: 'Panel Panda 666 com', //哈哈
columnWidth: 0.4,
height: 400,
},
{
xtype: 'panel',
title: 'Panel panda com 666',
columnWidth: 0.6,
layout: 'center',
height: 400
},
{
xtype: 'panel',
title: 'Panel 3',
width: 150,
height: 400
}
]
}
代码:
{
title: 'Column Layout - Mixed',
width: 450,
height: 250,
layout: 'column',
items: [
{
title: 'Column 1',
width: 100
},
{
title: 'Column 2',
columnWidth: 0.7
},
{
title: 'Column 3',
columnWidth: 0.3
}
],
}
代码:
{
xtype: 'panel',
layout : 'column',
scrollable: true,
requires: ['Ext.layout.container.Column'],
width : 800,
height: 300,
items: [
{
title : 'First Component width 30%',
html : 'This is First Component',
columnWidth : 0.30,
height:800,
},
{
title : 'Second Component width 40%',
html : 'This is Second Component',
columnWidth : 0.40
},
{
title : 'Third Component width 30%',
html : 'This is Third Component' ,
columnWidth : 0.30
}
]
}
代码:
{
xtype: 'panel',
width: 400,
height: 300,
layout: 'column',
items: [
{
xtype: 'panel',
title: 'Child Panel 1',
height: 100,
columnWidth: 0.5
},
{
xtype: 'panel',
title: 'Child Panel 2',
height: 100,
columnWidth: 0.5
}
]
}
手机扫一扫
移动阅读更方便
你可能感兴趣的文章