Sencha Touch 2 и плавающие, гибкие панели

У меня проблема с Sencha Touch 2 и прогибанием vbox. Вот мой код для панели (модифицированный для простоты, настоящая панель намного сложнее, но вот к чему она сводится):

Ext.define('risbergska2.view.Test', {
extend: 'Ext.Panel',
xtype: 'test',


config: {
    title: 'Test',
    iconCls: 'home',

    items: [
        {
            xtype: 'container',
            layout: 'vbox',
            items: [
                {
                    xtype: 'container',
                    flex: 2,
                    style: 'background-color: #f90;'
                },
                {
                    xtype: 'container',
                    flex: 1,
                    style: 'background-color: #9f0;'
                },
                {
                    xtype: 'container',
                    flex: 1,
                    style: 'background-color: #0f9;'
                },
                {
                    xtype: 'container',
                    flex: 2,
                    style: 'background-color: #90f;'
                }
            ]
        }
    ]
}

})

А вот мой Main.js:

Ext.define("risbergska2.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
    'Ext.TitleBar',
    'Ext.Video'
],
config: {
    tabBarPosition: 'bottom',

    items: [
        {
            xtype: 'homeloggedinview'
        },
        {
            xtype: 'myview'
        },
        {
            xtype: 'programview'
        },
        {
            xtype: 'socialview'
        },
        {
            xtype: 'aboutview'
        },
        {
            xtype: 'test'
        }
    ]
}

});

Мой app.js:

Ext.application({
name: 'risbergska2',

requires: [
    'Ext.MessageBox'
],

views: ['Main', 'HomeLoggedIn', 'My', 'Program', 'Social', 'About', 'Test'],

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('risbergska2.view.Main'));
},

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version. Reload now?",
        function(buttonId) {
            if (buttonId === 'yes') {
                window.location.reload();
            }
        }
    );
}

});

Если я запускаю этот код и перехожу на тестовую панель, ничего не отображается. Я хочу, чтобы он показывал (в тестовом примере) четыре разных контейнера с четырьмя разными цветами, верхний и нижний в два раза больше среднего по вертикали.

Разве это не способ получить такой результат? Где я ошибся?

Спасибо!