layout - 如何在 ExtJS 4 中实现流布局？

Question

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

我在 ExtJS 4.0 中找不到任何可以实现这一点的布局。

所以我想知道我将如何去做这件事。我对框架相当陌生，所以任何指针都会很棒。

Answer 1

您是否尝试过使用 ColumnLayout？如果您不指定“columnWidth”属性，则子元素从左到右是 css-floated：

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