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

时间:2020-09-11 14:44:24

标签: javascript extjs

我有标签面板。在选项卡开关(第二个选项卡)上,有一段时间我想根据某些条件在tab2panel1渲染,有时在tab2panel2渲染。这是我的配置。

doc.reference('/tokens').get();// something like this

这是我正在尝试的内容,但它正在更改为tab1。不是标签2的面板项。

{
            "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",
                    }]
                },  
            ]
        }

但是这导致选项卡1.不在选项卡中的项目。这里有什么帮助。

1 个答案:

答案 0 :(得分:1)

我认为这是个错误的地方,最好听听标签激活事件。像这样:

{
    "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);
            }
        }
    }]
}
相关问题