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?

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, Mar 24 '13 at 01:10
I definitely would like the container panel to grow, as well. I'll try your trick to see if it works, thanks! — El Guapo, Mar 24 '13 at 01:38

score 5 · Answer 1 · answered Mar 06 '14 at 01:56

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

does it work for dynamic items only on 4.2.2? I tried it, but it is not working on 3.x — sidgate, Dec 17 '14 at 08:48

score 4 · Accepted Answer · edited May 23 '17 at 11:53

4

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

edited May 23 '17 at 11:53

Community

1
1

answered Mar 24 '13 at 21:22

Izhaki

23,372
9
69
107

Now that I get to get back to my own work... I'll have a look at this... thanks! – El Guapo Mar 26 '13 at 15:16
This gets me part of the way there... i'm adding things dynamically (not during config)... do I need to know my width dimension before I add it? – El Guapo Mar 26 '13 at 15:48
The width of the container or the items? – Izhaki Mar 26 '13 at 23:17
So... technically this works, however, it doesn't work for me because I'm adding the little panels after the container has been rendered. Thanks for your help! – El Guapo Mar 27 '13 at 13:07
What exactly happens when you add the children? Can you try and call `doLayout()` on the container after adding the children? – Izhaki Mar 27 '13 at 13:30
Basically it clears out the entire container... very strange behavior... I tried to debug it... but, I got lost in a lot of queued events... I'll try doLayout() – El Guapo Mar 27 '13 at 13:42
@ElGuapo how was this solved? I have same requirement and doLayout does not work – sidgate Dec 17 '14 at 08:45

ExtJS Layout, Horizontally then grow vertically

2 Answers2

Linked