如何在ExtJS 4中实现flowlayout？

Question

我想使用一个布局，其中组件是像hbox一样水平添加的，但是如果组件超出容器的边界，则会在添加时将其移动到下一行。这与FlowLayout在swing和flex中的类似。

我在ExtJS 4.0中找不到任何可以实现此目的的布局。

所以我想知道如何做到这一点。我对框架很新，所以任何指针都会很棒。

Answer 1

您是否尝试过使用ColumnLayout？如果未指定“columnWidth”属性，子元素将从左向右进行css浮动：

 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
        }]
  });