ExtJS布局，水平然后垂直增长 [英] ExtJS Layout, Horizontally then grow vertically

问题描述

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

I have a Ext.panel.Panel into which I want to dynamically add other "smaller" panels representing different "things" in my application. This panel is at the top of a grid and it is the same width as the grid. When a "smaller" panel is dynamically added to this "container panel" I want the panels to be added horizontally then vertically if the total width of all the "little" panels is greater than the width of the container.

我已经尝试了'fit'，'hbox'，'vbox'等所有功能.

I've tried 'fit', 'hbox', 'vbox', everything.

我缺少布局类型吗?

推荐答案

您所追求的通常被称为flow布局，而ExtJS并不是开箱即用的(如果您问我，这是一个他们并不傻，因为这是一种非常常见的布局，实际上是一种应用于大多数dataview示例的方法，但是使用css而不是布局.

What you're after is generally known as a flow layout, which ExtJS doesn't have out of the box (if you ask me, it's a bit silly they don't as it is a very common layout and in fact the one applied on most of their dataview examples, but using css rather than a layout).

但是使用未定义columnWidth的列布局可以轻松实现.复制此答案:

But it can be achieved easily using column layout without columnWidth defined. Copying this answer:

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

这篇关于ExtJS布局，水平然后垂直增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！