1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    31
    Vote Rating
    0
    aq2.sanger is on a distinguished road

      0  

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

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


    Hello,

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

    PHP Code:
    Ext.onReady(function () {
        
    Ext.create('Ext.panel.Panel', {
            
    renderToExt.getBody(),
            
    title'Hello',
            
    layout: {
                
    type'hbox',
                
    shrinkToFittrue
            
    },
            
    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    HBox doesn't support auto sizing. You must put a height or a flex on each child.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    31
    Vote Rating
    0
    aq2.sanger is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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?
    --
    Regards,
    Asfand Qazi
    Team 87 HTGT
    Sanger Institute

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Have you looked into Column layout?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    31
    Vote Rating
    0
    aq2.sanger is on a distinguished road

      0  

    Default


    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
    --
    Regards,
    Asfand Qazi
    Team 87 HTGT
    Sanger Institute

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Sure... just don't use HBox layout
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    31
    Vote Rating
    0
    aq2.sanger is on a distinguished road

      0  

    Default


    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
    --
    Regards,
    Asfand Qazi
    Team 87 HTGT
    Sanger Institute

  8. #8
    Sencha User
    Join Date
    Aug 2009
    Posts
    7
    Vote Rating
    2
    brianpolk is on a distinguished road

      0  

    Default


    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.

  9. #9
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    229
    Vote Rating
    0
    ngd is an unknown quantity at this point

      0  

    Default


    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.

  10. #10
    Sencha Premium Member Troy Wolf's Avatar
    Join Date
    May 2007
    Location
    Kansas City
    Posts
    250
    Vote Rating
    2
    Troy Wolf is on a distinguished road

      0  

    Question Resizing container to children

    Resizing container to children


    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.