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:

alt text

.add() does this:

alt text

thanks for the idea about card layout, I'll look at that, but I solved this particular problem another way, see my answer below — Edward Tanguay, Dec 02 '10 at 14:57

score 8 · Answer 1 · answered Dec 02 '10 at 13:15

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

score 7 · Answer 2 · answered Jun 24 '11 at 14:17

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.

score 3 · Answer 3 · answered Oct 07 '12 at 07:55

3

Ext.getCmp('content-panel').body.update(record.get('id'));

This will really work

answered Oct 07 '12 at 07:55

Praveen

31
1

score 1 · Answer 4 · answered Dec 02 '10 at 14:56

Here's how I solved this:

function clearExtjsComponent(cmp) {
    var f;
    while(f = cmp.items.first()){
        cmp.remove(f, true);
    }
}

then when I want to replace the content of a panel with new content, I use this:

function replaceComponentContent(cmpParent, cmpContent) {
    clearExtjsComponent(cmpParent);
    cmpParent.add(cmpContent);
    cmpParent.doLayout();
}

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

4 Answers4

Linked