2 つの v-box が 2 つの異なるタブにあるビューが必要です。私のコードはエラーを表示しませんが、タブのないタブ付きパネルに表示される唯一のものです。同じクラスのいくつかのコピーを使用して、チュートリアルのカルーセルを部分的に編集していることがわかりますが、それは無視してください。
Ext.define("caryhartline.view.Carousel", {
extend : 'Ext.tab.Panel',
requires : ['Ext.carousel.Carousel'],
config : [{
tabBarPosition : 'top',
items : [{
title : 'Business',
iconCls : 'action',
layout : 'card',
config : [{
cls : 'cards',
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
flex : 1
},
items : [{
xtype : 'carousel',
items : [{
html : '',
cls : 'card businesstemplatepicture'
}, {
html : '',
cls : 'card businesstemplatepicture'
}]
}, {
xtype : 'carousel',
ui : 'light',
direction : 'vertical',
items : [{
html : '',
cls : 'card dark businesstemplate2picture'
}, {
html : 'And can also use <code>ui:light</code>.',
cls : 'card dark'
}, {
html : 'Card #3',
cls : 'card dark'
}]
}]
}]
}]
}, {
title : 'Minimalist',
iconCls : 'action',
layout : 'card',
config : {
cls : 'cards',
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
flex : 1
},
items : [{
xtype : 'carousel',
items : [{
html : '',
cls : 'card businesstemplatepicture'
}, {
html : '',
cls : 'card businesstemplatepicture'
}]
}, {
xtype : 'carousel',
ui : 'light',
direction : 'vertical',
items : [{
html : '',
cls : 'card dark businesstemplate2picture'
}, {
html : 'And can also use <code>ui:light</code>.',
cls : 'card dark'
}, {
html : 'Card #3',
cls : 'card dark'
}]
}]
}
}]
});