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 helps me regarding this.

Thanks Venkat

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