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

Question

我有一个Ext.panel.Panel,我想在其中动态添加代表我的应用程序中不同"东西"的其他"较小"面板.此面板位于网格的顶部,与网格的宽度相同.当一个"较小"的面板动态地添加到这个"容器面板"时,如果所有"小"面板的总宽度大于容器的宽度,我希望面板水平添加然后垂直添加.

我试过'fit','hbox','vbox',一切.

我错过了布局类型吗？

Answer 1

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

我需要补充一下:

style: {
    float: 'left'
},

每个项目,然后一切运作良好.

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

穆雷

Answer 2

你所追求的通常被称为flow布局，ExtJS没有开箱即用的布局（如果你问我，他们没有，这有点愚蠢，因为这是一种非常常见的布局，实际上应用在他们的大部分数据视图示例，但使用 css 而不是布局）。

但使用无需定义的列布局即可轻松实现columnWidth。复制这个答案：

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