extjs中创建三行两列布局
时间: 2023-09-16 20:14:24 浏览: 121
Ext.Viewport布局
3星 · 编辑精心推荐
在 ExtJS 中,可以使用 `Ext.container.Container` 组件来创建布局容器,然后在容器中添加子组件来实现布局。
要创建一个三行两列布局,可以使用 `Ext.container.Container` 组件的 `layout` 属性设置为 `table`,并在容器中添加子组件时指定行列信息。示例代码如下:
```javascript
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2
},
items: [
{
xtype: 'panel',
title: 'Panel 1',
rowspan: 2 // 占据两行
},
{
xtype: 'panel',
title: 'Panel 2'
},
{
xtype: 'panel',
title: 'Panel 3',
colspan: 2 // 占据两列
},
{
xtype: 'panel',
title: 'Panel 4'
},
{
xtype: 'panel',
title: 'Panel 5'
}
]
});
```
上面的代码中,创建了一个布局容器,设置布局类型为 `table`,列数为 2。然后添加了 5 个子组件,指定它们的行列信息,从而实现了一个三行两列的布局。
阅读全文