extjs 选项卡内容不会显示答案

【问题标题】：extjs Tab content won't displayextjs 选项卡内容不会显示
【发布时间】：2011-12-13 22:59:59
【问题描述】：

在下面的代码中，如果我将 activeTab 设置为 0，/viewer/welcome 的内容会按预期显示。如果我将 activeTab 设置为 1（如下所示），第二个选项卡会在加载时激活，但是当我单击第一个选项卡时，内容永远不会显示。在我单击选项卡之前，我可以看到它正在加载选项卡的内容（如果我设置 autoLoad: false，它根本不会加载它），但即使它已加载，它也不会显示。

{
    xtype: 'tabpanel',
    activeTab: 1,
    items: [
        {
            xtype: 'panel',
            loader: {
                url: '/viewer/welcome/',
                renderer: 'html',
                autoLoad: true
            },
            layout: {
                type: 'fit'
            },
            title: 'Welcome'
        },
                    ...
       }

为什么当标签被激活时，标签的内容并没有真正呈现？如果该选项卡是加载时的活动选项卡，为什么它会起作用，而当它被激活时则不起作用？

如果我进行这些更改，文本会一直按预期显示，但我会从虚假的激活调用中获得额外的页面加载。

{
    xtype: 'tabpanel',
    activeTab: 1,
    items: [
        {
            xtype: 'panel',
            loader: {
                url: '/viewer/welcome/',
                renderer: 'html',
                autoLoad: false
            },
            layout: {
                type: 'fit'
            },
            title: 'Welcome',
            listeners: {
                activate: function(me, opts) {
                     me.getLoader().load();
                }
            }
        },
                    ...
       }

我只是不明白为什么选项卡没有将这些内容作为选项卡的一部分来管理.....

【问题讨论】：

这是个好问题。选项卡中的网格面板没有遇到此问题。这正如预期的那样工作。它必须与加载程序配置有关，我以前从未使用过它。您当前正在运行什么版本？这可能有一个错误。
4.07（我刚开始使用它，其他大部分都按预期运行，所以是的，也许它只是一个错误）。我相当有信心双重激活是第一次激活发生时遍历堆栈的错误。
这里已经记录了双重激活错误sencha.com/forum/…

标签： tabs extjs4 tabpanel

【解决方案1】：

我认为这里的问题是您所指出的 - 选项卡没有管理内容。他们没有正确管理它的原因是从加载器返回的 HTML 内容就是 - 一些 HTML，它不是 ExtJS 组件。有争议的是，ExtJS“应该”管理它已加载的内容，但文档暗示相反：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html这可能值得提交一个错误。

另外，我注意到您在欢迎面板上指定了合适的布局。由于该面板中没有其他项目，您可能不需要该设置 - 顺便说一句，它可能（或可能不会）改进加载的 html 片段的处理方式。

祝你好运。

【讨论】：

适合与它有关。如果我删除layout: 'fit' 并将其设置为autoLoad: true，它将按预期工作。
我敢打赌，如果您在 firebug 中检查带有 fit 布局的 html，您会看到加载的 html 片段被推到欢迎面板的可见内容区域下方。也就是说面板的fit布局会用任何extjs组件填充自己的div。在它下面没有任何东西只会是空白的。 html 配置（与 html 加载器相同）将仅附加到底部，因此将其隐藏起来。

【解决方案2】：

我发现在 ExtJS 5.1 中使用引用名称不起作用。必须输入一个 itemId

【讨论】：