我在向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)&16);在ext-base-debug-w-comments.js中

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

我期望它的工作方式不正确吗?

最佳答案

我不一定会采用添加/删除文件的方法-为什么不给每个字段一个ID(也是表单字段的一种好习惯),方法是:

id:'fieldname'


然后使用以下方法隐藏/显示适当的字段:

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

关于javascript - 添加和删​​除ExtJS表单字段时遇到问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4026956/

10-12 12:51
查看更多