Add 1 container in 2 Panels - extjs

Question

Is it possible to add one container in two different panels? I tried doing something like this
var container = Ext.create('Ext.container.Container', {
//container content
});
var panel1 = Ext.create('Ext.form.Panel', {
//panel1 content
items : [container]
});
var panel2 = Ext.create('Ext.form.Panel', {
//panel2 content
items : [container]
});
But it adds the container only in the second Panel
Here is a Fiddle

Answer 1

It depends a little bit on your use case.
If you feel fine rendering the container two times you can just pass the config of the container to your panels:
var container = {
//container content
items: {
xtype: 'displayfield',
value: 'container content'
}
};
var panel1 = Ext.create('Ext.form.Panel', {
//panel1 content
renderTo: Ext.getBody(),
title: 'panel1',
items: container
});
var panel2 = Ext.create('Ext.form.Panel', {
//panel2 content
renderTo: Ext.getBody(),
title: 'panel2',
items: container
});
For reusing the instance and placing the same instance two times on different positions in the dom i see no way of achieving that. I even think its not doable at all, but maybe someone else can teach me how to do it in a clean and cozy way ;)

Answer 2

var container = {
items: [{
xtype: 'button',
text : 'select',
handler: function() {
alert(this.up('form').getTitle()+ " clicked");
}
}]
};
var panel1 = Ext.create('Ext.form.Panel', {
//panel1 content
renderTo: Ext.getBody(),
title: 'panel1',
items: container
});
var panel2 = Ext.create('Ext.form.Panel', {
//panel2 content
renderTo: Ext.getBody(),
title: 'panel2',
items: container
});
container is rendered on both panels.