Extjs Sencha Touch 2:列表不显示在选项卡面板内

Extjs Sencha Touch 2:列表不显示在选项卡面板内,extjs,sencha-touch,sencha-touch-2,Extjs,Sencha Touch,Sencha Touch 2,背景:我正在使用senchatouch 2 MVC框架开发一个应用程序。 我正在使用一个带有两个选项卡的选项卡面板的屏幕上工作 问题:在第一个选项卡中,我想显示标题栏和列表。我可以显示标题栏,但不能在选项卡内显示列表。当我使用Google Chrome检查元素时,列表显示为空。我正在使用sencha网站上的示例列表代码。我可以在另一个面板中显示列表,但当我将其作为项目放置在tabPanel中时,它不会显示 这是我正在使用的代码: Ext.define('POC.view.WUHomePage',

背景:我正在使用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'
        }]
    },

});    

不要将列表设置为全屏。只有一个组件应该设置为全屏,在您的情况下,它是TabPanel。相反,将列表设置为100%高度,并使用合适的布局设置父组件。

不要将列表设置为全屏。只有一个组件应该设置为全屏,在您的情况下,它是TabPanel。相反,将列表设置为100%高度,并使用合适的布局设置父组件。

非常感谢,Ohmz。我真的很感谢你的帮助:)。我没有设置导致问题的高度,儿童组件的全屏显示不应该为真。非常感谢,Ohmz。我真的很感谢你的帮助:)。我没有设置导致问题的高度,子组件的全屏显示不应为真。