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

Question

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

我试过“fit”，“hbox”，“vbox”，所有的东西。

我是否缺少布局类型？

Answer 1

你想要的布局通常被称为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
        }]
  });

​

​

Answer 2

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

我需要补充的是：

style: {
    float: 'left'
},

添加到每一项，然后一切都工作得很好。

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

默里