ExtJS 选项卡面板 - 选项卡不显示答案

【问题标题】：ExtJS Tab Panel - Tabs Not DisplayingExtJS 选项卡面板 - 选项卡不显示
【发布时间】：2014-04-04 15:16:19
【问题描述】：

我正在尝试在我的页面上设置一个选项卡面板，其中包含 2 个选项卡，两个选项卡都包含网格。但是，我的第一个网格面板甚至无法显示为选项卡。

var tabHistoryPanel = Ext.create('Ext.tab.Panel',
{
    name: 'historyTabs',
    id: 'historyTabs',
    border: false,
    flex: 1,
    activeTab: 0, 
//  layout: 'fit', 
//  style: 'border-top: 1px solid #4c535c;',    
    items: [                    
        actionsGrid,
        {
            title: 'Test',
            border: false,
            html: 'Testing'
        }
    ],
    dockedItems:
    [ .............

这是我要添加的网格面板。我可以显示“测试”选项卡，但不能显示操作网格。我在这里遗漏了什么吗？

var actionsGrid = Ext.create('Ext.grid.Panel',
    {
        title: 'Property',
        id: 'userActionsGrid',          
    //  style: 'border-top: 1px solid #4c535c;',
        border: false,
        flex: 1,
        store: Ext.create('Ext.data.Store',
        {................

我的 tabHistoryPanel 包含在此布局中。本质上，面板上方有一个带有选项卡的树结构。

return Ext.create('Ext.panel.Panel',
    {
        border: false,
        layout:
        {
            type: 'vbox',
            align: 'stretch'
        },
        items:
            [
                userTree,
                tabHistoryPanel
            ]
    });

【问题讨论】：

选项卡是如何包含的，采用什么样的布局？
tabHistoryPanel的布局设置还是包含哪个tabHistoryPanel的布局？
tabHistoryPanel 是一个标签面板，所以它是一个卡片布局。标签面板上方的布局层次结构是什么。
我相信我为您所指的内容添加了代码。我不知道为什么这会是一个问题，因为我确实有一个选项卡出现，我可以单击并查看，我可以在其中看到 HTML 被显示。我的网格在独立时也能 100% 正常工作。
您是否收到任何调试器消息？

标签： extjs tabpanel

【解决方案1】：

我终于解决了这个问题。我不必将选项卡面板分配给变量并将其放入返回的面板中，而是必须在返回的面板中明确定义它。见下文。无法告诉你为什么它以前不起作用，但它已修复。

return Ext.create('Ext.panel.Panel',
    {
        border: false,
        layout:
        {
            type: 'vbox',
            align: 'stretch'
        },
        items:
        [
            userTree,
            {
                xtype: 'tabpanel',
                name: 'historyTabs',
                id: 'historyTabs',
                flex: 1,
                activeTab: 0, 
                dockedItems: historyToolbar,    
                items: [                                                            
                        actionsGrid,
                        {
                            title: 'Test',
                            border: false,
                            html: 'Testing'
                        }
                ]
            }
        ]
    });

【讨论】：