How to actually destroy components in ExtJS?

Question

Inside an ExtJS FormPanel I dynamically add additional panels using:

var sub_panel = new SubPanel({various: params});
var form_panel.items.first(); 
form_panel.insert(3, sub_panel);

When I load a particular subpanel and call destroy on it it still exists within the form so that if I call:

form_panel.getForm().getFieldValues(); 

the fields that should have been deleted are still returning even though they have their isDestroyed property set to true.

This causes one of my checkbox's to throw the error "TypeError: Cannot read property 'name' of undefined" because the dom element of the checkbox has been deleted.

Note I have tried:

• subpanel.destroy();
• subpanel.remove(true);
• subpanel.removeAll(true);

My question is either:

1. How do I make sure that getFieldValues does not include destroyed items? OR
2. How can I actually remove the panels completely (i.e. actually destroy them)

EDIT:

I have managed to make a monkeypatch fix by having my own formIsValid method:

    formIsValid: function() {
        var valid = true;
        this.items.each(function(f){
            if (!f.isDestroyed) {
                if(!f.validate()){
                    valid = false;
                }
            }
        });

        return valid;
    }

The isDestroyed method however I think should be unnecessary so it would be better if I was able to actually destroy the component

Answer 1

That's from the form panel that you should call remove, with the child panel as argument:

formPanel.remove(subPanel, true);