Проблема с добавлением и удалением полей формы 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');

Это работает при первом выборе каждого радио, но последующие выборы не работают, как я ожидал. В Firefox возникает ошибка JavaScript:

Операция не поддерживается "код:" 9 [Прервать эту ошибку] ​​return !! (p.compareDocumentPosition (c) & 16); в ext-base-debug-w-comments.js

В Chrome к форме будут добавляться только метки.

Я ожидаю, что это сработает неправильно?

Answer 1

Я написал очень похожую форму. Если единственным общим элементом является радиогруппа, вот что я предлагаю:

Создайте внешний контейнер, содержащий RadioGroup, а затем подконтейнер с CardLayout. Каждый дочерний элемент этого макета карты содержит форму с полями для различных состояний RadioGroup. Добавьте слушателей в RadioGroup, чтобы при изменении выбора вы меняли активный элемент в контейнере карты.

Базовый код, с которого можно начать, когда я сделал это:

OuterForm = Ext.extend(Ext.Container, {
    initComponent: function() {
        Ext.apply(this, {
            layout: "vbox",
            layoutConfig: { align: "stretch" }
        });
        this.items = [{
            xtype: "container",
            layout: "form",
            items: [{
                xtype: "radiogroup",
                fieldLabel: "Form to fill out",
                ref: "../../formSelector",
                items: [{
                    name: "type",
                    inputValue: "1",
                    boxLabel: "Form 1"
                }, {
                    name: "type",
                    inputValue: "2",
                    boxLabel: "Form 2"
                }],
                listeners: {
                    scope: this,
                    change: function(rg, checkedItem) {
                        this.formContainer.layout.setActiveItem(parseInt(checkedItem.inputValue));
                    }
                }
            }]
        }, {
            xtype: "container",
            layout: "card",
            flex: 1,
            ref: "formContainer",
            items: [{
                xtype: "form1"
            }, {
                xtype: "form2"
            }]
        }];

        OuterForm.superclass.initComponent.call(this);
    }
});

Не проверено на опечатки / ошибки, но просто установите высоту для внешней формы, создайте xtypes формы form1 и form2, и это должно работать.

Если вам необходимо, чтобы все поля были частью одной формы, заставьте OuterForm расширить FormPanel вместо определения form1 и form2 как независимых FormPanels.

Answer 2

Я бы не стал подходить к добавлению / удалению файлов - почему бы не дать каждому полю идентификатор (также рекомендуется для полей формы), используя:

id:'fieldname'

Затем либо скрыть / показать поле каксоответствующее использование:

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