我想要一个带有TabPanel的视图,并且在带有两张卡片的Carousel中。
像这样:
var view = Ext.define("abril16.view.Main2", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar', 'Ext.carousel.Carousel'],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'Home',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
layout: 'fit',
flex: 1,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Beetoom',
},
},
{
title: 'Discover',
iconCls: 'action',
scrollable: true,
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Select',
layout: 'fit',
flex: 1,
},
{
docked: 'top',
xtype: 'titlebar',
title: 'Discover',
},
{
xtype: 'carousel',
items: [{
xtype: 'checkboxfield',
name: 'Hola',
label: 'Hola'
},
{
xtype: 'checkboxfield',
name: 'Action',
label: 'Adventure'
}
]
}
]
}
]
}
});
问题是这里没有任何事情发生。没有语法错误,但没有显示布局,而是旋转木马我在面板内部有一个空白背景。
非常感谢。
答案 0 :(得分:1)
我测试了你的代码。这是我从您的代码中观察到的内容。
为什么在['Select','Discover']
的第二个标签中需要两个标题栏'Discover'
。我想,您在'Discover'
标签中添加了两次标题栏。对于同一个标签,有两个标题栏是没有意义的。
包括发布标签代码,如下所示
{
title: 'Discover',
iconCls: 'action',
styleHtmlContent:true,
layout:'card',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Discover',
},
{
xtype: 'carousel',
items: [
{
xtype: 'checkboxfield',
name: 'Hola',
label: 'Hola'
},
{
xtype:'checkboxfield',
name:'Action',
label:'Adventure'
}
]
}
]
}