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 [打破此错误]返回!!（p.compareDocumentPosition（c）＆amp; 16）;在ext-base-debug-w-comments.js

中

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

我希望这种方式不正常吗？

Answer 1

我不一定会采用添加/删除文件的方法 - 为什么不使用以下方法给每个字段一个id（也是表单字段的好习惯）：

id:'fieldname'

然后使用以下方法隐藏/显示字段：

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

Answer 2

我写了一个非常相似的表格。如果唯一的共同元素是无线电组，这就是我的建议：

创建一个包含RadioGroup的外部Container，然后创建一个包含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);
    }
});

没有测试拼写错误/错误，只是为外部表单设置了一个高度，创建了form1和form2 xtypes，它应该可以工作。

如果您需要同一表单的所有字段，请使OuterForm扩展FormPanel，而不是将form1和form2定义为独立的FormPanels。

添加和删除ExtJS表单字段的麻烦

2 个答案:

添加和删​​除ExtJS表单字段的麻烦

2 个答案:

添加和删除ExtJS表单字段的麻烦