如何用新内容替换面板的内容？

Question

我有一个regionContent面板，我将其添加到我的视口中。

如何用新内容替换其内容？

    ...
    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()这样做：

.add()这样做：

Answer 1

您需要使用具有卡片布局的面板：

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

然后该面板可以进入您的视口。要在它们之间切换，您将使用以下内容：

card.getLayout().setActiveItem(1);

查看两个卡片布局的工作示例： http://dev.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html

Answer 2

您无法使用.remove()删除HTML，因为它不被视为面板的项目。因此，您需要使用.update()删除该HTML，然后添加新面板。

// 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();

在屏幕截图中，您可能通过传递新面板（例如.update()）来使用.update(newPanel)。该方法用于更新HTML，而不是替换组件。采取相反的方式：

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

您是否真的使用您发布的解决方案来解决这个问题？对我来说，clearExtjsComponent()会留下HTML字符串“这是原始内容”，就像在屏幕截图中一样。

Answer 3

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

这确实有用

Answer 4

以下是我解决这个问题的方法：

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

然后，当我想用​​新内容替换面板的内容时，我使用它：

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