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

Question

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

如果红色主要方块是Panel，则蓝色方块是一个容器，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;'
        }]
    }
});

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

以下是我的问题（我用红色圈出来）

1. 在谷歌浏览器中，如果我使用Netscape，它会显示主面板的标题文本。
2. 这些项目似乎没有使用vbox布局进行排列，虽然我在Sencha Try中尝试了相同的配置并且确实生成了所需的布局。

有人可以如此友善地指出我可能做错了吗？

扩展信息：

我发现stackoverflow中的以下条目指出需要在包含元素（Vbox layout issue in a tab panel）上定义模板，因此我修改了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开发的最可靠的桌面浏览器？

由于

Answer 1

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

我的大多数问题都是由于 - Chrome 29错误造成的。请在此处查看如何解决此问题：http://www.sencha.com/forum/announcement.php?f=90&a=43