1. #1
    Sencha User swarnendude's Avatar
    Join Date
    Jul 2009
    Location
    Kolkata, India
    Posts
    117
    Vote Rating
    1
    swarnendude is on a distinguished road

      0  

    Exclamation vbox inside hbox layout issue

    vbox inside hbox layout issue


    I am putting a vbox layout inside hbox layout. But the vbox isn't working properly. Here is the code:

    Code:
    var panel = new Ext.Panel({
                fullscreen : true,
                layout : {
                    type : 'hbox',
                    align : 'stretch'
                },
                items : [{
                        width : 50,
                        layout : {
                            type : 'vbox',
                            align : 'stretch'
                        },
                        items : [{
                                flex : 1,
                                html : '1st'
                        }, {
                            height : 50,
                            html : '2nd'
                        }]
                }, {
                    flex : 1,
                    html : 'Large'
                }]
            });

    Here, the 2 panels of vbox is coming over one another. If I just create the vbox only, it works perfectly. Here is the code:

    Code:
    var panel = new Ext.Panel({
                fullscreen : true,
                layout : {
                    type : 'vbox',
                    align : 'stretch'
                },
                items : [{
                    flex : 1,
                    html : '1st'
                }, {
                    height : 50,
                    html : '2nd'
                }]
            });
    Am I doing anything wrong?
    Swarnendu
    Co-founder & Lead Architect @ Innofied

    ------------------
    I blog at http://www.swarnendude.com

  2. #2
    Sencha User
    Join Date
    May 2011
    Posts
    52
    Vote Rating
    0
    mbalsam will become famous soon enough

      0  

    Default


    I have a similar problem. I try to put several hbox 'rows' into a vbox layout to simulate a grid kind of thing but all I get to see is the items inside the rows lined up one below the other. Same appies if I try this the other way round, putting vboxes into an hbox.

    Can we have a statement if nesting different box layouts works or not?

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    6
    Vote Rating
    0
    mckernad is on a distinguished road

      0  

    Default


    can you attach screenshots of whats happening?

    Your first code block should produce something that looks like this:
    Code:
    
    
    
    ---------------------------------------------
    |                   |                        |
    |                   |                        |
    |       vboxItem1   |                        |
    |                   |                        |
    |                   |                        |
    |                   |                        |
    |-------------------|       hboxItem2        |
    |                   |                        |
    |                   |                        |
    |       vboxItem2   |                        |
    |                   |                        |
    |                   |                        |
    |                   |                        |
    ---------------------------------------------
    You said something is overlapping but I'm not quite sure what you mean.
    Things to try:
    Remove all the sizing and flex stuff, see if it's default configuration still gives you issues. If it doesn't, keep putting attributes back one by one and find out what causes the issue.

  4. #4
    Sencha User
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    295
    Vote Rating
    5
    Stuart-SwarmOnline will become famous soon enough

      0  

    Default


    Although I don't have a solution I can clarify the problem a little:

    The "1st" panel is being given a height of 0 and so the content spills out giving the appearance of it overlapping.

    If you give the first hbox panel a fixed height then the child panels' heights are correctly calculated and you can see the "1st" and "2nd" panels correctly.

    I've attached a quick screenshot of the issue and the markup:

    hbox-vbox.jpg

Thread Participants: 3

Tags for this Thread