如何用新的内容替换面板的内容？ [英] How can I replace the content of a panel with new content?

问题描述

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

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

我如何替换其内容有新的内容？

    ...
    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（）执行此操作：

img src =https://i.stack.imgur.com/7r8Ab.pngalt =alt text>

推荐答案

p>您需要使用带有布局布局的面板：

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

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

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

这篇关于如何用新的内容替换面板的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！