extjs remove/readd textfield to form bug?

Question

I have a form where i have a radiogroup 'yes', 'no'.

When i click on 'yes' i got a textfield added to a fieldset on the form with the config option: allowBlank: false. So there is validation on the field. When I click on 'no' all fields are removed from the fieldset that is present on the form.

The problem is when the validation is active, so when you go inside the textfield and you click away from it without entering any characters into it and i click on the radiobutton 'no' the textfield disappears and gives me the following error when i catch it:

Element.alignToXY with an element that doesn't exist

When i click afterwards on the radiobutton 'yes', the textfield is shown again BUT i get an error:

TypeError: dom is undefined

I could catch these errors and do nothing with it because in fact the form seems to be working, the textfields got added and removed like it should, there are only errors present and i don't like the concept of it. Does anyone has a clue why this error occurs and how to get rid of it so it's working 100% properly?

Here is an example of the code:

var radiogroup = new Ext.form.RadioGroup({
    fieldLabel: 'Radio group test',
    allowBlank: false,
    anchor: '85%',
    items: [{
        boxLabel: 'Yes',
        name: 'radio',
        inputValue: 1
    }, {
        boxLabel: 'No',
        name: 'radio',
        inputValue: 2
    }],
    listeners: {
        change: function (rg, radio) {

            if (radio.inputValue == 1) {
                var textfield_test = new Ext.form.TextField({
                    fieldLabel: 'Test',
                    allowBlank: false,
                    id: 'test',
                    name: 'test',
                    anchor: '85%',
                    width: 320,
                    helpText: 'test'
                });
                textfield_fieldset.insert(textfield_fieldset.items.length, textfield_test);
            } else {
                try {
                    txt_test = Ext.getCmp('test');
                    if (txt_test) {
                        textfield_fieldset.remove(txt_test);
                    }
                    textfield_fieldset.doLayout();
                } catch (err) {
                    alert(err);
                }
            }
        }
    }
});

Answer 1

I've done this successfully not just for one textbox, but for an entire panel, and it works pretty well. In my case, any number of panel can be added and removed dynamically and it works pretty well. The relevant code that I used were:

panel.insert(medIndex,getNewPanel());
panel.doLayout();

And for remove i used,

var cmp = Ext.getCmp('Panel-' + Id);
   if (cmp) {
     treatment.remove(cmp, true); // True is the autoDestroy option.
   }

These two in combination works for me. Though I would suggest that if you're doing this only for one textbox, then convert it into a hidden field and disable it. When you disable a field, it does not get submitted in a post, or ajax post request.

Hope this helps.