更新记录:
2022年6月1日 开始。
2022年6月10日 发布。
table布局类似表格,通过指定行列数实现布局。
在父容器中指定
layout: 'table'
layoutConfig: {
},
//或者
layout: {
type: 'table',
},
在子组件中可以使用rowspan和colspan指定跨越的列数和行数,以创建复杂的布局
使用column指定表格的列数
layoutConfig: {
columns: 3, //指定为3列
}
使用tableAttrs配置项设置表格修饰table元素的HTMl、CSS属性。
layoutConfig: {
tableAttrs: {
style: {
width: '100%' //宽度100%
}
}
}
使用trAttrs配置项设置表格的tr元素的HTMl、CSS属性。
layout: {
type: 'table',
columns: 2,
trAttrs: {
},
},
使用tdAttrs配置项设置表格的td元素的HTMl、CSS属性。
layout: {
type: 'table',
columns: 2,
tdAttrs: {
}
},
适合场景:
表格布局的场景。
代码:
{
xtype: 'panel',
width: 700,
height: 400,
layout: {
type: 'table',
columns: 3, //指定为3列
tableAttrs: {
style: {
width: '100%' //宽度100%
}
}
},
items: [
{
title: '第一行第一格',
html: 'Item 1'
},
{
title: '第一行第二格',
html: 'Item 2'
},
{
title: '第一行第三格',
html: 'Item 3'
},
{
title: '第二行第一格',
html: 'Item 4'
},
{
title: '第二行第二格',
html: 'Item 5'
},
{
title: '第二行第三格',
html: 'Item 6'
},
{
title: '第四行第一格',
html: 'Item 7'
}
]
}
代码:
{
xtype: 'panel',
width: 700,
height: 400,
layout: {
type: 'table',
columns: 3, //指定为3列
tableAttrs: {
style: {
width: '100%' //宽度100%
}
}
},
items: [
{
title: '第一行第一格',
rowspan: 2, //跨越2行
html: 'Item 1'
},
{
title: '第一行第二格',
html: 'Item 2'
},
{
title: '第一行第三格',
html: 'Item 3'
},
{
title: '第二行第二格',
html: 'Item 4'
},
{
title: '第二行第二格',
html: 'Item 5',
rowspan: 2 //跨越2行
},
{
title: '第二行第三格',
html: 'Item 6'
},
{
title: '第四行第一格',
html: 'Item 7'
}
]
}
代码:
{
xtype: 'panel',
width: 700,
height: 400,
layout: {
type: 'table',
columns: 3, //指定为3列
tableAttrs: {
style: {
width: '100%' //宽度100%
}
}
},
items: [
{
title: '第一行第一格',
colspan: 2, //跨越2列
html: 'Item 1'
},
{
title: '第一行第二格',
html: 'Item 2'
},
{
title: '第二行第一格',
html: 'Item 3'
},
{
title: '第二行第二格',
html: 'Item 4'
},
{
title: '第二行第三格',
html: 'Item 5',
colspan: 2 //跨越2列
},
{
title: '第三行第一格',
html: 'Item 6'
},
{
title: '第三行第二格',
html: 'Item 7'
}
]
}
代码:
{
xtype: 'panel',
width:600,
height:200,
layout : {
type :'table',
columns : 3,
tableAttrs: {
style: {
width: '100%'
}
}
},
items : [
{
title : 'Panel1',
html : 'This panel has colspan = 2',
colspan :2
},
{
title : 'Panel2',
html : 'This panel has rowspan = 2',
rowspan: 2
},
{
title : 'Panel3',
html : 'This s panel 3'
},
{
title : 'Panel4',
html : 'This is panel 4'
},
{
title : 'Panel5',
html : 'This is panel 5'
}
]
}
手机扫一扫
移动阅读更方便
你可能感兴趣的文章