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

Question

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

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

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

Answer 1

您尝试过使用ColumnLayout吗？如果不指定“columnWidth”属性，则子元素将从左到右进行 css float :

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