ExtJS Layout, Horizontally then grow vertically

Question

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.

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

Am I missing a layout type?

Answer 1

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).

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