如何在选项卡开关中激活选项卡面板的第二项

Question

I have tab panel. On tab switch (2nd tab) some time I want to render at tab2panel1 and sometime at tab2panel2 based on some condition. here is my configuration.

{
            "xtype" : "tabpanel",
            "tabPosition" : "left",
            "layout" : "fit",
            "tabRotation" : 0.0,
            "items" : [ 
                {
                    "xtype" : "panel",
                    "title" : "tab1",
                    "icon" : "classic/resources/images/Profile_active.png",
                    "layout" : "card",
                    "items" : [ 
                    {
                         "xtype" : "panel",
                        "title" : "tab1panel1",
                    }]
                }, 
                {
                    "xtype" : "panel",
                    "title" : "tab1",
                    "icon" : "classic/resources/images/Profile_active.png",
                    "layout" : "card",
                    "items" : [ 
                    {
                         "xtype" : "panel",
                        "title" : "tab2panel1",
                    },{
                         "xtype" : "panel",
                        "title" : "tab2panel1",
                    }]
                },  
            ]
        }

Here is what I am trying but it is changing to tab1. not the panel item of tab 2.

tabchange: function (tab, newTab, oldTab) {
        let _this = this,
            cardItems = newTab.items;
        
        if (tab.changeValue == true) {
             newTab.getLayout().setActiveItem(1);
        }
    }

But this leading to the tab of 1. not item inside the tab. Any help here.

Answer 1

I think it is wrong place, better to listen tab activation event. Something like this:

{
    "xtype": "tabpanel",
    "tabPosition": "left",
    "layout": "fit",
    "tabRotation": 0.0,
    "items": [{
        "xtype": "panel",
        "title": "tab1",
        "icon": "classic/resources/images/Profile_active.png",
        "layout": "card",
        "items": [{
            "xtype": "panel",
            "title": "tab1panel1",
            html: "Tab1Panel1"
        }]
    }, {
        "xtype": "panel",
        "title": "tab1",
        "icon": "classic/resources/images/Profile_active.png",
        "layout": "card",
        "items": [{
            "xtype": "panel",
            "title": "tab2panel1",
            html: "Tab2Panel1"
        }, {
            "xtype": "panel",
            "title": "tab2panel2",
            html: "Tab2Panel2"
        }],
        listeners: {
            activate: function (panel) {
                // Some random condition
                const activeItemIndex = Math.round(Math.random());
                panel.setActiveItem(activeItemIndex);
            }
        }
    }]
}