我正在尝试创建一个菜单视图,其中上面有两个工具栏,中间有三个轮播表,底部有另一个工具栏,有几个不同的图标。我使用Ext.tab.Panel,其中我试图添加三个轮播表,以便可以交换并查看菜单。我无法将旋转木马添加到我的标签面板中。我尝试了很多但没有结果。这就是我所做的。
Ext.define('GS.view.Home', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: ['Ext.TitleBar', 'Ext.Carousel'],
config: {
fullscreen: true,
scrollable: 'vertical',
defaults: {flex: 1},
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Mobile App'
},
items:[
{
xtype: 'carousel',
direction: 'horizontal',
items: [
{
xtype: 'tabpanel',
styleHtmlContent: true,
style: 'background-color: black',
},
{
xtype: 'tabpanel',
styleHtmlContent: true,
style: 'background-color: orange',
},
],
}
]
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'bottom',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4? token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
]
}
});
答案 0 :(得分:3)
“items”属性是从第一个标签(“欢迎”)复制的,这是不正确的定义,应该只有一个。
Ext.define('GS.view.Home', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: ['Ext.TitleBar', 'Ext.Carousel'],
config: {
fullscreen: true,
scrollable: 'vertical',
tabBarPosition: 'bottom',
items: [ {
docked: 'top',
xtype: 'titlebar',
title: 'Mobile App'
},{
title: 'Welcome',
iconCls: 'home',
xtype: 'carousel',
direction: 'horizontal',
defaults: {
xtype: 'tabpanel',
styleHtmlContent: true
},
items: [{
style: 'background-color: black',
},{
style: 'background-color: orange',
}]
},{
title: 'Get Started',
iconCls: 'action',
items: [{
docked: 'bottom',
xtype: 'titlebar',
title: 'Getting Started'
},{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4? token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}]
}]
}
});