Replace component function

[grgur]

In case you need to replace a component with new one, here's the addition to AbstractContainer that will allow such action:



Ext.override(Ext.AbstractComponent, {
replace: function(newCmp) {
var oldCmp = this,
parent = oldCmp.up(), //find the parent component
index;

//find the exact position of the component that needs to be replaced
parent.items.each(function(c,i) {if (c==oldCmp) index=i;});

//remove the sucker
parent.remove(oldCmp, true);

//add the new one
newCmp = parent.insert(index, newCmp);

//refresh layout
parent.doLayout();

//return the newly created component
return newCmp;
}
});


All you need to do is find the component you want to replace and - replace it:


Ext.getCmp('iNeedToBeReplaced').replace({xtype: 'panel',html:'I just replaced that old component'});