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 pletely (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 ponent

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 pletely (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 ponent

• javascript
• extjs
• destroy
• formfield

Share Improve this question Follow edited Nov 19, 2013 at 1:33 Tony J Watson asked Nov 18, 2013 at 9:21 Tony J WatsonTony J Watson 70933 gold badges1010 silver badges2222 bronze badges 5

• What version of ExtJS do you use? In your code, you create a sub_panel, and do not use it? I don't understand what is the problem in your code... – V G Commented Nov 18, 2013 at 9:24
• Could you fix this line var form_panel.items.first();? – user1636522 Commented Nov 18, 2013 at 9:25
• Have you tried using the latest version? – Evan Trimboli Commented Nov 19, 2013 at 0:50
• @AndreiI Sorry mistake it was supposed to be subpanel – Tony J Watson Commented Nov 19, 2013 at 1:20
• @EvenTrimboli: Unfortunatly we are locked into using ExtJS 3.6. An upgrade to 4.x would require a plete rewrite of the UI – Tony J Watson Commented Nov 19, 2013 at 6:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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

formPanel.remove(subPanel, true);