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

Answer 2

I found that when using the example above in ExtJS 4.2.2 the panels were stacked vertically.

I needed to add:

style: {
    float: 'left'
},

to each item and then all worked well.

I tested with both static config (like the example above) and also with dynamic add / remove (using a custom container for each child item). The container panel re-rendered in a flow-like fashion each time. Also correct when resizing the browser window - the child items moved to accommodate the new panel size.

Murray