why do newly added components not display after removing other components from extjs panel

Question

In ExtJs 6 classic, I have an Ext.panel.Panel that I have added children to, some of these children are dynamically created Panels and containers. I save references to these containers and remove them from the parent Panel (this) like so:

    if (this.myChildPanels.length > 0) {
        for (var i = this.myChildPanels.length - 1; i >= 0; i--) {
            this.remove(this.myChildPanels[i], true);
        }
        this.remove(this.queryById('finalPanel'), true);
        this.myChildPanels= [];
    }

These child panels do disappear and no longer display as expected.

However when I attempt to add new containers back to the parent panel (this), the new panels do not display

    this.add(Ext.create('Ext.container.Container', { 
          width: '200px',
          height: '400px',
          layout: {
             type: 'fit'
          },
          items: [ {
             xtype: 'label',
             text: 'Some stuff'
          }]
    ));

The parent is using a fit layout, are there any methods I need to call on the parent Panel after removing and before adding new components to it? The dynamic addition works the first time, but not after removing components that were dynamically added (kicked off by button press).

Answer 1

use this.removeAll() function to remove all child elements in your panel. after adding some new elements try to call updateLayout function. if this solution does not help provide fiddle example recreating your problem to work with.