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

Question

如何将多个i项目放在同一个标签标签面板中。

我有一个选项卡面板，在第一个选项卡中我有按钮。单击选项卡1的按钮时，我想显示面板3而不是面板。有什么解决方法吗？

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之间切换，则可以使用卡，并能够切换回来

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

小提琴

或者您可以只删除选项卡面板并添加面板