Same container in every tab

[Kaiser_Wilhelm]

Hello all,
This is my first post so sorry if this is a stupid question. I am currently using extjs 4 and have a tab panel of about 4 tabs and I want to put the same container which contains two toolbars inside each tab. However, whenever I try to do this, it will only add the container to the last tab and leave the first three empty. Here's a snippet of my code:



var tabPanel = new Ext.tab.Panel ({ region: 'center',
title: 'Title:',
activeTab: 0, // First tab active by default
bodyStyle: 'padding: 5px',
items: [
{
title: 'tab1',
items: tabcontainer
},
{
title: 'tab2',
items: tabcontainer
},
{
title: 'tab3',
items: tabcontainer
},
{
title: 'tab4',
items: tabcontainer
}
]
})


displayPanel = new Ext.Panel({
id: 'main_panel',
renderTo : 'box_main',
border: false,
items: tabPanel
});


I believe I have to make a class and instantiate a new object every time I reuse the container but Im having trouble getting it to work. Any help would be great Thanks

[jay@moduscreate.com]

is tabcontainer a reference to a generic JavaScript object (without an id property)?

[hendricd]

Clone your configs:



items: [
Ext.apply({title: 'tab1'} , tabcontainer ),
Ext.apply({title: 'tab2'} , tabcontainer ),
Ext.apply({title: 'tab3'} , tabcontainer )
]


Each component config needs to be unique instance. Ext.apply accomplishes that.