Javascript 将布局添加到容器元素后，vbox布局在Firefox中工作，但在Google Chrome中不工作

我正在尝试使用Sencha Touch 2创建一个具有以下结构的屏幕：

其中，红色的主正方形是一个面板，蓝色的正方形是一个容器，geen正方形应该是两个包含HTML内容的项目

下面是我在Main.js文件中使用的代码

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

在名为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;'
        }]
    }
});

我从这段代码中得到的是以下输出：

这是我的问题（我用红色圈了起来）

在Google Chrome中，主面板的标题文本不显示，尽管如果我使用Netscape，它会显示

虽然我在Sencha Try中尝试了相同的配置，并生成了所需的布局，但这些项似乎并没有使用vbox布局进行排列

有人能这么好心地指出我可能做错了什么吗

扩展信息：

我发现stackoverflow中的以下条目指出需要在包含元素（）上定义一个模板，因此我修改了Main.js的代码，以便为包含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',
            } ]
        } 
        ]
    }
});

在这一更改之后，当我使用Firefox桌面浏览器测试它时，它仍然不起作用，但在使用Firefox时它不起作用。我认为，由于Chrome是一款基于webkit的浏览器，所以它被认为是另一种方式

这是我在Firefox中得到的输出：

这与Google Chrome中运行的代码完全相同

我的理解是，推荐的测试浏览器是Google Chrome，因为它基于webkit。这是正确的吗？在移动设备上测试sencha touch 2开发之前，哪一款是最可靠的桌面浏览器

---

谢谢

最后，我通过StackOverflow上发布的另一个问题得到了答案

---

我的大多数问题都是由-chrome29错误引起的。看看如何解决这个问题：

没有人能给我带来一些线索，这样我就可以找出可能的错误。。。该代码目前在Firefox中运行正常，但当我在Google Chrome上运行时，它只显示重叠的文本。