1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    179
    Vote Rating
    0
    steffen.rahn is on a distinguished road

      0  

    Question vbox layout for a nested tabpanel fails to render grid

    vbox layout for a nested tabpanel fails to render grid


    Tested in Chrome v.24

    Consider the following layouts

    ViewPort (Border Layout) -> TabPanel(no defined Layout) -> TabPanel(VBox Layout)

    If I place a GridPanel in the last TabPanel the rendering fails, while it works for a simple panel.

    I've made a JSFiddle with the latest 4.2 RC Libraries which will show this behavior, just click on the failing tab . (The debug version prints Layout run failed to the console)

    Do I miss something or is this a Bug?

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,920
    Vote Rating
    632
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      1  

    Default


    The problem is that the grid can't acquire a width appropriately because it needs to measure the width of the grid, but the docked items are wider than the body. There are several ways to handle it:

    1)
    Code:
    shrinkWrapDock: true,
    xtype: 'grid',
    flex: 1
    This config is new in 4.2 and tells the grid to include the docked items when trying to figure out that maximum size. It's opt-in because it slightly changes the behaviour and incurs a minimal performance cost.

    2)
    Code:
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: {
        xtype: 'grid',
        flex: 1
    }
    Assign a width via stretch.

    3)
    Code:
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: {
        xtype: 'grid',
        flex: 1
    }
    Use an hbox layout to stretch the width, basically the same as 2.

    4)

    Code:
    layout: 'fit',
    items: {
        xtype: 'grid'
    }
    Use a fit layout to size it to the container, probably the easiest option.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    179
    Vote Rating
    0
    steffen.rahn is on a distinguished road

      0  

    Default


    Thanks you evan, I didn't know that 'stretch' have so a huge impact here.

Thread Participants: 1