vbox layout working in Firefox but not in Google Chrome after adding a layout to the container element

Question

I am trying to create a screen with Sencha Touch 2 with the following structure:

Where the red main square is a Panel,, the blue square is a container and the geen squares should be two items with HTML content in them.

Below is the code I use in the Main.js file

Ext.define('EventApp.view.Main', {
    extend : 'Ext.tab.Panel',
    id : 'mainView',
    xtype : 'main',
    requires : [ 'Ext.TitleBar', 'Ext.Video' ],
    config : {
        tabBarPosition : 'bottom',

        items : [ {
            title : 'Home',
            iconCls : 'home',

            items : [ {
                docked : 'top',
                xtype : 'titlebar',
                title : 'Welcome to Sencha Touch 2'
            }, {
                xtype : 'eventsCarrousel'
            } ],
        }, 

        {
            title : 'Events',
            iconCls : 'time',
            id : 'eventsButton',

            items : [ {
                docked : 'top',
                xtype : 'titlebar',
                title : 'Events'
            }, {
                xtype : 'eventList',
            } ]
        } 
        ]
    }
});

and in the view named eventsCarrousel.js

Ext.define('EventApp.view.eventsCarrousel', {
    extend: 'Ext.Container',
    xtype: 'eventsCarrousel',
    config: {
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items : [{
            flex: 1,
            html : "This is the sample top pannel." ,
            style : 'background-color: #5E99CC;'
        }, {
            flex: 1,
            html : "Second pannel.",
            style : 'background-color: #4D99CC;'
        }]
    }
});

What I get out of this code is the following output:

Here are my problems (which I have circled in red)

1. In Google Chrome the title text of the main panel is not displaying although it does display if I use Netscape.
2. The items do not seem to be arranged using the vbox layout, although I have tried this same config in Sencha Try and did produce the desired Layout.

Could someone be so kind to point me out to what I might be doing wrong?

Extended info:

I found the following entry in stackoverflow wich pointed to the need of defining a template on the containing element ( Vbox layout issue in a tab panel ) therefore I modified my code of Main.js to add a fit layout to the component containing the eventsCarrousel

  Ext.define('EventApp.view.Main', {
    extend : 'Ext.tab.Panel',
    id : 'mainView',
    xtype : 'main',
    requires : [ 'Ext.TitleBar', 'Ext.Video' ],
    config : {
        tabBarPosition : 'bottom',

        items : [ {
            title : 'Home',
            iconCls : 'home',
            layout: 'fit', // JUST ADDED THIS LINE
            items : [ {
                docked : 'top',
                xtype : 'titlebar',
                title : 'Welcome to Sencha Touch 2'
            }, {
                xtype : 'eventsCarrousel'
            } ],
        }, 

        {
            title : 'Events',
            iconCls : 'time',
            id : 'eventsButton',

            items : [ {
                docked : 'top',
                xtype : 'titlebar',
                title : 'Events'
            }, {
                xtype : 'eventList',
            } ]
        } 
        ]
    }
});

After this change it still did not work when I tested it using Firefox desktop browser and it works, but it does not work when using Firefox. I thought that it was suposed to be the other way arround since Chrome is a webkit based browser.

This is the output I get in Firefox:

An this is the exact same code running in Google Chrome.

My understanding was that the recomended testing browser was Google Chrome because it was based on webkit. Is this correct? Which is the most reliable desktop browser to test sencha touch 2 development in before doing so in the mobile devices?

Thanks

Answer 1

Finally I got the answer through another question posted in StackOverflow.

Most of my problems were caused by - Chrome 29 bug. See how to fix this here: http://www.sencha.com/forum/announcement.php?f=90&a=43