Как я могу заменить содержимое панели новым контентом?

У меня есть панель 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() делает следующее:

alt text

.add() делает следующее:

alt text

Ответы

Ответ 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

Ответ 2

Вы не можете удалить HTML с помощью .remove(), потому что он не считается элементом панели. Поэтому вам нужно использовать .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 "Это оригинальный контент" позади, как и на скриншоте.

Ответ 3

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

Это действительно работает

Ответ 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();
}