Ext Js how to change the xtype dynamically

Question

Hi,

I have a border layout whose center panel is defined like the below.

     {
       region:'center',
       id:'Center',
       layout:'fit',
       xtype:'gridA'
     }

But on click of some button, I need to change the grid to 'gridB' through javascript programmatically. How can this be done.

I tried the following with no success.

1) Ext.getCmp('Center').xtype = 'gridB';

2) Ext.getCmp('Center').setxtype('gridB');

3) Ext.getCmp('Center').items.add({xtype:'gridB'});

Please suggest me the way through which this can be achieved.

Thanks Sk

Answer 1

Supposing you have named the layout as layout this should be done like that:

layout,getComponent('Center').add({xtype:'gridB'});

Note that you can't change xtype dynamically, you only can use .add method.

Answer 2

This was answered in the ExtJs forum, and you won't get any different (workable) answers.

Use a "card" layout to switch between different child items.