How can I replace the content of a panel with new content?

Question

I have a regionContent panel which I add to my viewport.

How can I replace its content with new content?

    ...
    var regionContent = new Ext.Panel({
        id: 'contentArea',
        region: 'center',
        padding:'10',
        autoScroll: true,
        html: 'this is the original content'
    });

    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [ regionMenu, regionContent ]
    });

    var newPanel = new Ext.Panel({
        region: 'east',
        title: 'Info Panel',
        width: 300,
        html: 'this is a panel that is added'
    });
    // regionContent.update(newPanel); //renders as javascript code ???
    // regionContent.remove(...) //how do I remove ALL CONTENT, I will not know what is in this panel to remove it specifically
    regionContent.add(newPanel); //adds to original content but does not replace it
    regionContent.doLayout();
    ...

.update() does this:

.add() does this:

Answer 1

You'll want to use a panel with card layout:

var card=new Ext.Panel({
    layout:'card',
    activeItem:0,
    items:[ regionContent , newPanel ]
});

That panel can then go inside your viewport. To switch between them you'll use something like this:

card.getLayout().setActiveItem(1);

Take a look at the two card layouts for working examples: http://dev.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html

Answer 2

You cannot remove the HTML using .remove(), because it's not considered an item of a panel. So you need to use .update() to get rid of that HTML, and then add your new panel.

// clear the html by replacing it with an empty string.
// calling update with no arguments would work as well.
regionContent.update('');

// add the new component
regionContent.add(newPanel);

// redraw the containing panel
regionContent.doLayout();

From your screenshot, it looks like you may have used .update() by passing in the new panel, e.g., .update(newPanel). That method is used to update HTML, not replace components. To go the opposite way:

regionContent.removeAll(); // if you want to remove all the items
regionContent.update('this is the original content');
regionContent.doLayout();

Did you really use the solution you posted to solve this exact problem? For me clearExtjsComponent() leaves the HTML string "This is the original content" behind, just like in your screenshot.