Vbox layout issue in a tab panel

Question

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. However, when I simply change `hbox` to `vbox` all the text overlays in the top left corner. 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' }] }…

Accepted Answer

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'},
    ]
  }
});
```

Vbox layout issue in a tab panel

Solution

Problem