ExtJS Layout, Horizontally then grow vertically

5
votes

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?

2
layoutextjs4extjs4.1
have you tried using the 'auto' layout and just putting display:inline-block on your nested panels? Are you expecting the outer panel to actually get taller or is it enough that the inner panels flow across the panel horizontally and then down? - wantok
I definitely would like the container panel to grow, as well. I'll try your trick to see if it works, thanks! - El Guapo

2 Answers

4
votes

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

enter image description here

5
votes

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