How to replace a component in ExtJS

Question

I have an ExtJS window, with a toolbar at the top, and loads with plain Panel at the bottom with plain HTML. This works fine. On a button click, I'd like to be able to replace the bottom panel (called content), with another panel. If tried this

var clickHandler = function(calendar){
    // 'content' is the panel id
    // calendar is also an Ext.Panel object
    Ext.getCmp('content').update(calendar); 
};

What am I missing?

Answer 1

Update replaces HTML content.

You want to remove the old panel and add the new. Try .remove()ing the old panel and .add()ing the new one, and don't forget .doLayout().