javascript - 添加和删​​除 ExtJS 表单字段时出现问题

Question

我在向 ExtJS 表单添加/删除字段时遇到了一些麻烦。我的用例如下:

在表单上提供一组单选按钮。根据选择的单选按钮，显示一组不同的表单字段。

我对 ExtJS 不太熟悉，但我正在做的是缓存要添加/删除的字段，并在单选按钮更改事件被触发时从表单中添加/删除它们。这是我的代码的简化版本:

var textFieldA = new Ext.form.TextField({
    fieldLabel: 'Text Field A',
    name: 'text_field_a',
    allowBlank: false
});

var textFieldB = new Ext.form.TextField({
    fieldLabel: 'Text Field B',
    name: 'text_field_b',
    allowBlank: false
});

var form = new Ext.FormPanel({
    autoScroll: true,
    bodyStyle: 'padding: 5px 5px 0',
    border: false,
    frame: true,
    layout: 'form',
    items: [{
        xtype: 'fieldset',
        fieldLabel: 'Fieldset',
        autoHeight: true,
        items: [{
            xtype: 'radiogroup',
            fieldLabel: 'Show text field',
            columns: 1,
            vertical: true,
            items: [
                {
                    xtype: 'radio',
                    boxLabel: 'Show field a',
                    name: 'field_to_show',
                    inputValue: 'a'
                },
                {
                    xtype: 'radio',
                    boxLabel: 'Show field b',
                    name: 'field_to_show',
                    inputValue: 'b'
                }
            ],
            listeners: {
                'change': {
                    fn: function(radioGroup, selectedRadio) {
                        switch (selectedRadio.getGroupValue())
                        {
                            case 'a':
                                radioGroup.findParentByType('fieldset').remove(textFieldB);
                                radioGroup.findParentByType('fieldset').add(textFieldA);
                                break;
                            case 'b':
                                radioGroup.findParentByType('fieldset').remove(textFieldA);
                                radioGroup.findParentByType('fieldset').add(textFieldB);
                                break;
                        }
                        radioGroup.findParentByType('fieldset').doLayout();
                    }
                }
            }
        }]
    }]
});

form.render('container');

这在第一次选择每个 radio 时有效，但随后的选择并不像我预期的那样工作。在 Firefox 中，会引发 JavaScript 错误:

不支持该操作”代码:“9[中断此错误] return !!(p.compareDocumentPosition(c) & 16);在 ext-base-debug-w-comments.js

在 Chrome 中，只有标签会添加到表单中。

我期望的工作方式是否不正确？

Answer 1

我不一定会采用添加/删除字段的方法 - 为什么不给每个字段一个 id(对于表单字段也是一个很好的做法)，使用:

id:'fieldname'

然后根据需要隐藏/显示字段:

Ext.getCmp('fieldname').hide()
Ext.getCmp('fieldname').show()