我正在尝试使用 Sencha Touch 2 创建一个具有以下结构的屏幕：
红色的主方块是一个面板，蓝色的方块是一个容器，而绿色的方块应该是两个包含 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;'
}]
}
});
我从这段代码中得到的是以下输出：
这是我的问题（我用红色圈出）
- 在谷歌浏览器中，主面板的标题文本没有显示，但如果我使用 Netscape 会显示。
- 这些项目似乎没有使用 vbox 布局进行排列，尽管我在 Sencha Try 中尝试了相同的配置并且确实产生了所需的布局。
有人能这么好心地指出我可能做错了什么吗？
扩展信息：
我在stackoverflow中找到了以下条目，它指出需要在包含元素上定义一个模板（选项卡面板中的Vbox布局问题）因此我修改了我的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 中运行的完全相同的代码。
我的理解是推荐的测试浏览器是谷歌浏览器，因为它是基于 webkit 的。它是否正确？在移动设备上测试 sencha touch 2 开发之前，哪个是最可靠的桌面浏览器？
谢谢