(ExtJS 4.2.2) Can't get tab that wasn't been active

Question

I have container

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]
            }]
        }]

When page loaded I can get first tab because it is already active. But I can't get second tab because it hasn't been created.

I tried to use deferredRender:false and forceLayout:true (like in code sample), but it doesn't working.

What exactly do you mean by "get tab" can you post your code? — pagep, Mar 18 '17 at 20:22
Please add the code of how you tried to access the secound tab. — And-y, Mar 20 '17 at 07:25
Hi guys! Thanks for your answers. I'm trying to get tab in next way: var elements = document.querySelectorAll(query); — Andrey Ugryn, Mar 20 '17 at 16:45
The trouble is in that the second tab will be rendered only when I'll click on it. Before click when I tried to get the tab, I recieve empty array. But when I open it tab at least once, I will get item list instead empty array in every next try. It because tab will be already rendered. The question is how to make panel with two rendered tabs? — Andrey Ugryn, Mar 20 '17 at 22:16

And-y · Answer 1 · 2017-03-21T07:16:16.497

In ExtJs you should interact with components and not with the dom directly.

So when you replace var elements = document.querySelectorAll(query); with Ext.ComponentQuery.query(query); you get an array of the matching components and you can interact with them.

From the Sencha documentation of Ext.ComponentQuery:

Provides searching of Components within Ext.ComponentManager (globally) or a specific Ext.container.Container on the document with a similar syntax to a CSS selector. Returns Array of matching Components, or empty Array.

So after the component query Ext.ComponentQuery.query('#tab-container > panel') you have all inner panels. With second = components[1] you have a reference to the second. Now you can interact with the component.
But when you need also access to the dom of the component you get it by second.getEl().dom.

So the complete code looks like.

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

See the code in action in the Sencha Fiddle.

(ExtJS 4.2.2) Can't get tab that wasn't been active

1 Answers1