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

【问题标题】：How to implement a flowlayout in ExtJS 4?如何在 ExtJS 4 中实现流布局？
【发布时间】：2011-05-30 22:46:33
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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
        }]
  });

【讨论】：