Auto-sizing a container to size of its children - how?

[aq2.sanger]

Hello,

As always, let's have some sample code that reflects my situation:

Ext.onReady(function () {
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Hello',
        layout: {
            type: 'hbox',
            shrinkToFit: true
        },
        html: '<p>Testing</p>',
        tbar: {
            xtype: 'buttongroup',
            title: 'Click one',
            items: [
            {
                text: 'Button1'
            },
            {
                text: 'Button2'
            }
            ]
        }
    });
}); 

So I'm adding a ButtonGroup to the top toolbar of a panel, and the combined width of the buttons is a lot less than the width of the panel. However, but ButtonGroup sets its width to the width of the panel rather than the combined width of the buttons.

How do I make a container like the ButtonGroup automatically be the size of its components (the buttons) rather than the container? Ext3 did this automatically, so I just want to get that behavior back.

Thanks

[mitchellsimoens]

HBox doesn't support auto sizing. You must put a height or a flex on each child.

[aq2.sanger]

HBox doesn't support auto sizing. You must put a height or a flex on each child.

You mean a width? I'm talking about width here, not height, just to clear up any confusion.

Well, each button already has a width based on its text. The container SHOULD just shrink itself to fit them since that's what tables (which the container is based on) do by default. It did that in ExtJS 3, so it must be possible. I tried setting flex: 1 on all the buttons - no effect.

Help?

[mitchellsimoens]

Yes... width or height... doesn't support auto-sizing so you will have to specify heights and widths.

Have you looked into Column layout?

[aq2.sanger]

The whole point of the exercise is to get the container as tight around the buttons in it as possible for aesthetic purposes. I have just looked at column layout and it also needs explicit widths, so that won't serve my purposes - surely it's not that hard to say to a container, "set your width to the accumulated widths of your items plus your own border widths"? HTML tables do this by default anyway, after all.

Thanks

[mitchellsimoens]

Sure... just don't use HBox layout

[aq2.sanger]

Ah.... maybe I should elaborate. I tried the default 'table' layout too, and it also stretches across to fill the whole top dock of the panel I added it to, just like when I used a hbox (which is implemented as a table under-the-covers anyway, isn't it). Checking the DOM, it has been given an explicit width.

Now, in ExtJS, ButtonGroups also had explicit widths, and without any layout manager they constrained their width to the total width of the buttons like I want the ExtJS 4 one to do. So I'm just asking how I can get that behaviour back.

Thanks

[brianpolk]

I am in agreement with aq2.sanger. Best I can tell, none of the V4 layout managers provide for resizing the container to accommodate the contents. Even with fit, in porting apps from V3 I've found that I have to move the size spec from the contained component to the container. The container pays no attention to the size of contained items. It is not solved by not using hbox. None of the layout managers appear to provide for adjusting a container to adapt to the components therein. This poses some significant problems.

Some layout managers have a param: bindToOwnerCtContainer and/or bindToOwnerCtComponent, but the doc isn't clear, and they do not seem to have any effect. It might be helpful to know if these config params might somehow provide a solution.

[ngd]

Do you guys have any answer to this? I too am facing the same problem. I need my container to have the height calculated from its childredn.

[Troy Wolf]

I too am struggling to "simply" have a container (panel) size it's height to "fit" it's content. With the caveat that if the content is too big to fit the max possible height (constrained by it's own container), the panel should provide a scrollbar to access the overflow.