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

请参阅Sencha Fiddle中的代码。

（ExtJS 4.2.2）无法获得未激活的标签

1 个答案: