vbox layout for a nested tabpanel fails to render grid

[steffen.rahn]

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?

[evant]

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)

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)

layout: {
    type: 'vbox',
    align: 'stretch'
},
items: {
    xtype: 'grid',
    flex: 1
}

Assign a width via stretch.

3)

layout: {
    type: 'hbox',
    align: 'stretch'
},
items: {
    xtype: 'grid',
    flex: 1
}

Use an hbox layout to stretch the width, basically the same as 2.

4)

layout: 'fit',
items: {
    xtype: 'grid'
}

Use a fit layout to size it to the container, probably the easiest option.

[steffen.rahn]

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