Vbox layout issue in a tab panel

I'm having an issue with a vbox layout so I created a simple example that illustrates the problem, which is getting my vbox layout to fit the height of the screen.

On the hbox screen, the view looks as expected.

enter image description here

However, when I simply change hbox to vbox all the text overlays in the top left corner.

enter image description here

All the code is given below and it's on Sencha Fiddle

app.js

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'SenchaFiddle',

    views: ['MainView', 'HboxView', 'VboxView'],

    launch: function() {
        Ext.Viewport.add(Ext.create('SenchaFiddle.view.MainView'));

    }
});

MainView.js

Ext.define("SenchaFiddle.view.MainView", {
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar'
    ],
    config: {
        tabBarPosition: 'bottom',
        items: [{
            title: 'hbox',
            iconCls: 'action',

            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'Hbox'
            }, {
                xtype: 'hbox-view'
            }]
        }, {
            title: 'vbox',
            iconCls: 'action',
            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'Vbox'
            }, {
                xtype: 'vbox-view'
            }]
        }]
    }
});

HboxView.js

Ext.define("SenchaFiddle.view.HboxView", {
    extend: 'Ext.Container',
    xtype: 'hbox-view',
    config: {
        style: 'background-color: #0f0',
        layout: 'hbox',
        items: [{
            xtype: 'panel',
            html: 'baz',
            style: 'background-color: #ff0',
            flex: 1
        }, {
            xtype: 'panel',
            html: 'foo',
            style: 'background-color: #f00',
            flex: 2
        }, {
            xtype: 'panel',
            html: 'bar',
            style: 'background-color: #fff',
            flex: 3
        }]
    }
});

VboxView.js

Ext.define("SenchaFiddle.view.VboxView", {
    extend: 'Ext.Container',
    xtype: 'vbox-view',
    config: {
        style: 'background-color: #0f0',
        layout: 'vbox',

        items: [{
            xtype: 'panel',
            html: 'baz',
            style: 'background-color: #ff0',
            flex: 1
        }, {
            xtype: 'panel',
            html: 'foo',
            style: 'background-color: #f00',
            flex: 2
        }, {
            xtype: 'panel',
            html: 'bar',
            style: 'background-color: #fff',
            flex: 3
        }]
    }
});

Solution

The problem is in MainView.js structure. Your vbox wrapper container has no layout:

{
  title: 'vbox',
  iconCls: 'action',
  layout: card, // or fit, etc. :)
  items: [
    {
      docked: 'top',
      xtype: 'titlebar',
      title: 'Vbox'
    },
    {
      xtype: 'vbox-view'
    }
  ]
},

But it's not very good code. Better to add titlebar and some configs to VBoxView and HboxView definition:

 Ext.define("SenchaFiddle.view.VboxView", {
        extend: 'Ext.Container',
        xtype: 'vbox-view',
        config: {
            style: 'background-color: #0f0',
            layout: 'vbox',
            title: 'Vbox', // this is better place for title and iconCls :)
            iconCls: 'action',
            items: [
                // title bar is here :) 
                {
                   type: 'titlebar',
                   docked: 'top',
                   title: 'Navigation',
                },
                {
                    xtype: 'panel',
                    html: 'baz',
                    style: 'background-color: #ff0',
                    flex: 1
                },
                {
                    xtype: 'panel',
                    html: 'foo',
                    style: 'background-color: #f00',
                    flex: 2
                },
                {
                    xtype: 'panel',                
                    html: 'bar',
                    style: 'background-color: #fff',
                    flex: 3
                }
            ]
        }
    });

And in MainView.js

Ext.define("SenchaFiddle.view.MainView", {
  extend: 'Ext.tab.Panel',
  // ...    
  config: {
    tabBarPosition: 'bottom',
    items: [
      {xtype: 'hbox-view'}, // very nice code :)
      {xtype: 'vbox-view'},
    ]
  }
});