（ExtJS 4.2.2）无法获取未激活的选项卡答案

【问题标题】：(ExtJS 4.2.2) Can't get tab that wasn't been active（ExtJS 4.2.2）无法获取未激活的选项卡
【发布时间】：2017-03-18 18:01:00
【问题描述】：

我有容器

items: [{
            xtype: 'container',
            layout: 'card',
            flex: 1,
            itemId: 'tab-container',
            deferredRender: false,
            items: [ {
                xtype: 'panel',
                layout: 'fit',
                dockedItems: [routessearch],
                items: [routes]
            }, {
                xtype: 'panel',
                layout: 'fit',
                forceLayout: true,
                dockedItems: [routessearch],
                items: [routesSubs]
            }]
        }]

当页面加载时，我可以获得第一个标签，因为它已经处于活动状态。但我无法获得第二个标签，因为它尚未创建。

我尝试使用 deferredRender:false 和 forceLayout:true（就像在代码示例中一样），但它不起作用。

【问题讨论】：

你所说的“获取标签”到底是什么意思，你能发布你的代码吗？
你能用小提琴来说明你的问题吗？
请添加您尝试访问第二个选项卡的代码。
大家好！感谢您的回答。我正在尝试以另一种方式获取选项卡： var elements = document.querySelectorAll(query);
问题在于第二个选项卡只有在我单击它时才会呈现。在我尝试获取选项卡时单击之前，我收到了空数组。但是，当我至少打开它一次选项卡时，我会在下次尝试时得到项目列表而不是空数组。这是因为选项卡将已经呈现。问题是如何制作带有两个渲染标签的面板？

标签： extjs force-layout deferred-rendering

【解决方案1】：

在 ExtJs 中，您应该与组件进行交互，而不是直接与 dom 交互。

因此，当您将 var elements = document.querySelectorAll(query); 替换为 Ext.ComponentQuery.query(query); 时，您会得到一个匹配组件的数组，并且您可以与它们进行交互。

来自Ext.ComponentQuery的Sencha文档：

在 Ext.ComponentManager 中提供组件搜索（全局）或文档上的特定 Ext.container.Container 类似于 CSS 选择器的语法。返回匹配的数组组件，或空数组。

所以在组件查询Ext.ComponentQuery.query('#tab-container > panel') 之后，您拥有所有内部面板。使用second = components[1]，您可以参考第二个。现在您可以与组件进行交互了。
但是，当您还需要访问组件的 dom 时，您可以通过 second.getEl().dom 获得它。

所以完整的代码看起来像。

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    width: 200,
    height: 200,
    layout: 'card',
    itemId: 'tab-container',
    deferredRender: false,
    items: [{
        title: 'P1'
    }, {
        title: 'P2'
    }],
    listeners: {
        boxready: function () {
            var components = Ext.ComponentQuery.query('#tab-container > panel');
            var second = components[1];
            var el = second.getEl();
            var dom = el.dom;
            // code to interact with the component or with the dom
        }
    }
});

查看Sencha Fiddle中的代码。

【讨论】：