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