How to re-render the panel to different div when panel already render to some other div

Question

I have created a Ext.Panel object, it rendered properly to specified div element on my page.

I want to replace the panel object underlying element(previously rendered div element) to another div which will be identified dynamically.

Here I don't want to create the Panel object once again by specifying identified div element, I need to make use of existing panel object and need to show the panel in the place where the identified div exists.

Can any one help me regarding this.

Answer 1

If you create your panel as a custom extension, with it's own namespace:

Ext.namespace('My.Panel');

My.Panel.SomePanel = Ext.extends(Ext.Panel,{
    // Your custom panel configuration here
    itemId:'myPanel'
});

Ext.reg('mypanel',My.Panel.SomePanel);

Then you can create your panel whenever it might be needed, even referencing it by the xtype you've registered:

var myWin = new Ext.Window({
    title:'Some Title',
    height: 300,
    width: 300,
    items:[{
        xtype: 'mypanel',
        data: someData
    }]
});

var myTabs = new Ext.TabPanel({
    title: 'Some Tab Panel',
    activeTab: 0,
    items:[{
        xtype: 'mypanel',
        title: 'SomePanel number 1'
    }]
});