Using ExtJs 6 classic, I have a situation where I am dealing with an Ext.panel.Panel that contains dynamically created child Panels and containers. What I do is save references to these containers and remove them from the parent Panel (this) utilizing the code snippet below:
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= [];
}
As expected, the child panels disappear and are no longer displayed.
However, after removing these components, when I try to add new containers back to the parent panel (this), the new panels do not show up.
this.add(Ext.create('Ext.container.Container', {
width: '200px',
height: '400px',
layout: {
type: 'fit'
},
items: [ {
xtype: 'label',
text: 'Some stuff'
}]
));
The parent Panel is set to use a fit layout. Are there any specific methods that I should call on the parent Panel after removing the components and before adding new ones? The issue seems to be with re-adding components after removal, specifically when triggered by a button press event.