上に 2 つのツールバーがあり、中央に 3 つのカルーセル シートがあり、下にいくつかの異なるアイコンがある別のツールバーがあるメニュー ビューを作成しようとしています。Ext.tab.Panel を使用して、3 つのカルーセル シートを追加して、1 つを切り替えてメニューを表示できるようにしました。タブ パネルにカルーセルを追加できませんでした。私はたくさん試しましたが、結果はありません。これが私がやったことです。
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'
}
]
}
]
}
});