Question

Given a border layout with a west (navigation) and a center region. Let say I click on topic A in the west region, I want to replace (replace as in ‘delete last topic’) the center region with ‘extjs’ program code named topic_a.js

I succeed in loading with this code:

dynamicPanel = new Ext.Component({
    loader: {
        url: '/www/file.htm',
        renderer: 'html',
        autoLoad: true,
        scripts: true
    }
});

var oMainContainer = Ext.getCmp('maincontainer');
oMainContainer.show();
oMainContainer.add(dynamicPanel);

But calling this the second time ‘adds’ things up in the center region and of course fails short in ‘deleting’, what would be a good approach?

Answer 1

Can’t you just do something like this:

var oMainContainer = Ext.getCmp('maincontainer');
oMainContainer.show();
oMainContainer.removeAll();
oMainContainer.add(dynamicPanel);

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.container.Container-method-removeAll

I hope I understand your question correctly. This will remove all child components and them you can add in your new component.