我有一个Ext.panel.Panel,我想在其中动态添加代表我的应用程序中不同“东西”的其他“较小”面板。此面板位于网格的顶部,与网格的宽度相同。当一个“较小”的面板动态地添加到这个“容器面板”时,如果所有“小”面板的总宽度大于容器的宽度,我希望面板水平添加然后垂直添加。
我试过'fit','hbox','vbox',一切。
我错过了布局类型吗?
答案 0 :(得分:5)
我发现在ExtJS 4.2.2中使用上面的例子时,面板是垂直堆叠的。
我需要添加:
style: {
float: 'left'
},
每个项目,然后一切运作良好。
我使用静态配置(如上面的示例)以及动态添加/删除(使用每个子项的自定义容器)进行测试。容器面板每次都以流动方式重新渲染。在调整浏览器窗口大小时也要更正 - 移动子项以适应新的面板大小。
默里
答案 1 :(得分:4)
你所追求的通常被称为flow
布局,ExtJS没有开箱即用(如果你问我,它有点傻,因为它是一个很常见的布局,实际上应用于大多数数据视图示例,但使用css而不是布局。)
但是可以使用未定义columnWidth
的列布局轻松实现。正在复制this answer:
Ext.create('Ext.Panel', {
width: 500,
height: 280,
title: "ColumnLayout Panel",
layout: 'column',
renderTo: document.body,
items: [{
xtype: 'panel',
title: 'First Inner Panel',
width: 250,
height: 90
},{
xtype: 'panel',
title: 'Second Inner Panel',
width: 200,
height: 90
}, {
xtype: 'panel',
title: 'Third Inner Panel',
width: 150,
height: 90
}]
});