背景:我正在使用 senchatouch 2 MVC 框架开发应用程序。我正在使用带有两个选项卡的选项卡面板的屏幕上工作。
问题:在第一个选项卡中,我想显示一个标题栏和一个列表。我能够显示标题栏,但不能显示选项卡内的列表。当我使用 Google Chrome 检查元素时,列表显示为空。我正在使用 sencha 网站上的示例列表代码。我可以在另一个面板中显示列表,但是当我将它作为一个项目放置在 tabPanel 中时它不显示。
这是我正在使用的代码:
Ext.define('POC.view.WUHomePage', {
extend: 'Ext.TabPanel',
requires: ['Ext.TitleBar', 'Ext.dataview.List', 'Ext.data.proxy.JsonP'],
alias: 'widget.wuHomePageView',
config: {
fullscreen: true,
tabBarPosition: 'bottom',
cardSwitchAnimation: 'slide',
defaults: {
styleHtmlContent: true
},
items: [{
// This is first tab
title: 'Home',
iconCls: 'home',
items: [{
xtype: 'titlebar',
title: 'Hello',
docked: 'top',
items: [{
xtype: 'button',
text: 'LogOut',
ui: 'action',
itemId: 'newButton',
align: 'right'
}]
}, {
xtype: 'list',
title: 'Sample',
fullscreen: true,
itemTpl: '{title}',
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}]
}]
},
// This is second tab
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}]
},
});