[英]Sencha Touch 2 - Carousel in Tabbed Panel
我希望有一個視圖,其中2個v-box位於兩個不同的選項卡中。 我的代碼顯示沒有錯誤,但唯一的東西顯示在沒有選項卡的選項卡式面板中。 您可以看到部分編輯了教程Carousel與同一類的一些副本,但忽略它。
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'
}]
}]
}
}]
});
出於某種原因,將內容放入配置中會導致問題。 不確定有什么問題。 我想當我們不能在類定義中使用嵌套配置時。 但這應該有效
Ext.define("App.view.Carousel", {
extend : 'Ext.tab.Panel',
requires : ['Ext.carousel.Carousel'],
config : {
tabBarPosition : 'top',
items : [{
title : 'Business',
iconCls : 'action',
cls : 'cards',
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
flex : 1
},
items : [{
xtype : 'carousel',
items : [{
html : 'Test 1',
cls : 'card businesstemplatepicture'
}, {
html : 'Test 2',
cls : 'card businesstemplatepicture'
}]
}, {
xtype : 'carousel',
ui : 'light',
direction : 'vertical',
items : [{
html : 'Test 3',
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',
xtype:'panel',
layout:'vbox',
defaults:{
flex:1
},
items:[{
xtype : 'carousel',
direction:'vertical',
items:[
{
style:'background-color:blue;'
},
{
style:'background-color:red;'
}
]
},{
xtype : 'carousel',
direction:'horizontal',
items:[
{
style:'background-color:green;'
},
{
style:'background-color:orange;'
}
]
}
]
}]
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.