如何将多个 i 项目带入同一个选项卡选项卡面板中

Question

如何将多个 i 项放在同一个选项卡面板中。

我有一个 tabPanel，在第一个标签中我有按钮。单击 tab1 的按钮时，我想显示 panel3 而不是面板。有什么解决方法吗？

Ext.create('Ext.tab.Panel', {
    width : 200,
    height : 200,
    renderTo : Ext.getBody(),
    items : [{
        title : 'tab1',
        items : [{
            xtype :"panel",
            itemId : "panel1"
        },{
            xtype : "button"
        }]
    }, {
        title : 'tab2',
        items : [{
            xtype :"panel",
            itemId : "panel2"
        }]
    }]
});

//

{
    xtype :"panel",
    itemId : "panel3"
}

点击按钮时有什么帮助我可以加载名为“panel3”的新组件

Answer 1

如果您计划在 panel3 和 tabpanel 之间切换并能够切换回来，您可以使用 card

var tab = Ext.create('Ext.tab.Panel', {
            width: 200,
            height: 200,
            items: [{
                title: 'tab1',
                items: [{
                    xtype: "panel",
                    itemId: "panel1"
                }, {
                    xtype: "butt
                    on",
                    text: 'change panel',
                    handler: function () {
                        mainPanel.getLayout().next()
                        // mainPanel.remove(tab);
                        // mainPannel.add(panel);
                    }
                }]
            }, {
                title: 'tab2',
                items: [{
                    xtype: "panel",
                    itemId: "panel2"
                }]
            }]
        });

        //

        var panel = Ext.widget({
            xtype: "panel",
            itemId: "panel3",
            html: 'Hi, I`m panel3'
        })

        var mainPanel = Ext.widget({
            layout: 'card',
            xtype: 'panel',
            renderTo: Ext.getBody(),
            items: [tab, panel]
        })

fiddle

或者您可以删除标签面板并添加面板