What is the correct way of removing a component I know I’m not going to use anymore, but I want to use new instances of the same class later?
For example, a create form is added to the viewport using Ext.Viewport.add(), but once it is submitted, I want to destroy the form, so next time the user wants to create an item, a new form is generated (i.e. new component is instantiated).
I tried both Ext.Viewport.remove(form, false) and Ext.Viewport.remove(form, true), they both give me errors: TypeError: Cannot set property 'className' of undefined.
Apparently, the reason this was not working is that I have tried to remove a component from code that I ran from an event handler for a component contained in the component to-be-removed.
Example, if you click on a button, and the button immediately tries to remove its container component from the viewport, the remove will succeed, but the button release event will be called with no DOM element to work with, as the button itself has also been removed.
An easy workaround is to call
Ext.Viewport.remove(...)after a short timeout.