ExtJS 布局，水平然后垂直增长

Question

我有一个 Ext.panel.Panel，我想在其中动态添加代表我的应用程序中不同“事物”的其他“较小”面板。该面板位于网格的顶部，与网格的宽度相同。当“较小”面板动态添加到此“容器面板”时，如果所有“小”面板的总宽度大于容器的宽度，我希望面板水平添加，然后垂直添加。

我已经尝试了“fit”、“hbox”、“vbox”等所有方法。

我是否缺少布局类型？

Answer 1

我发现在 ExtJS 4.2.2 中使用上面的示例时，面板是垂直堆叠的。

我需要补充：

style: {
    float: 'left'
},

到每个项目，然后一切都很好。

我使用静态配置（如上面的示例）和动态添加/删除（为每个子项使用自定义容器）进行了测试。容器面板每次都以类似流的方式重新渲染。调整浏览器窗口大小时也更正 - 子项移动以适应新的面板大小。

穆雷

Answer 2

你所追求的通常被称为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
        }]
  });