(ExtJS 4.2.2)无法获取未处于活动状态的选项卡

Question

我有容器

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(就像在代码示例中一样(，但它不起作用。

Answer 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
        }
    }
});

请参阅煎茶小提琴中的操作代码。