Question

我有一个表格，我有一个放射性组'是'，'不'。

当我点击“是”时，我在表单上的字段集中添加了一个文本字段，其中包含config选项：allowBlank：false。因此，该领域有验证。当我单击“否”时，将从表单上存在的字段集中删除所有字段。

问题是当验证处于活动状态时，所以当你进入文本区域并点击它而没有在其中输入任何字符时，我点击单选按钮'否'，文本字段消失，并在给我时出现以下错误我抓住了它：

Element.alignToXY，其元素不存在

当我在radiobutton'是'之后点击时，文本字段再次显示但是我得到一个错误：

TypeError：dom未定义

我可以捕获这些错误并且不做任何事情，因为事实上表单似乎正在工作，文本字段被添加和删除它应该，只有错误存在，我不喜欢它的概念。有没有人知道为什么会出现这种错误以及如何摆脱它以使其100％正常工作？

以下是代码示例：

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

我已经成功完成了这项工作，不仅仅针对一个textbox，而是针对整个panel，而且效果非常好。就我而言，任何数量的panel都可以动态添加和删除，并且效果非常好。我使用的相关代码是：

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

对于我使用的删除，

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

这两个组合对我有用。虽然我建议如果你只为一个textbox执行此操作，请将其转换为hidden字段和disable字段。当您disable字段时，它不会在post或ajax post request中提交。

希望这有帮助。

Answer 2

首先，为什么要重新添加/重新删除这样的组件？，... 如果我是你...我将使用textfield类的hide / show方法..

在阅读完您的代码后，我假设您使用2个项目formPanel和radiogroup制作fieldset，其中字段集中有textfield。 ..所以，客串.. mybe喜欢这个？

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(a,b){
            if (b.inputValue==1){
                Ext.getCmp("textfield").enable();
                Ext.getCmp("textfield").show();
            }else{
                Ext.getCmp("textfield").disable(); // set disable to prevent send empty data
                Ext.getCmp("textfield").hide();
            }                
        }
    }
});

var formPanel = new Ext.form.FormPanel({
    url : 'www.google.com',
    method : "GET",
    layout:'column',
    frame :true,
    border : false,
    items : [
                radiogroup,
                {
                xtype:'fieldset',
                id : 'test',
                title: 'Fieldset',
                collapsible: true,
                height : 200,
                width : 350,
                items :[{
                        xtype : "textfield",
                        id : 'textfield',
                        fieldLabel : "input data",
                        name : "text",
                        hidden:true,
                        disabled:true
                       }]
                }
            ]
});

var win = new Ext.Window({
    title : "holla",
    width : 400,
    height: 300,
    border : false,
    layout:'fit',
    items  : [formPanel]
});
win.show();

Answer 3

我创建了一个jsfiddle来回答这个问题。文本字段似乎在那里正确添加/删除：http://jsfiddle.net/jaycode/PGSb7/4/

干杯。

编辑：为了完整性，我想我也会在这里发布代码

<强> HTML

<div id="radios"></div>
<div id="textfield_fieldset"></div>

<强> JS

var textfield_fieldset = new Ext.form.FieldSet({
    renderTo: 'textfield_fieldset',
});

var radiogroup = new Ext.form.RadioGroup({
    renderTo: 'radios',
    width: 200,
    height: 60,
    fieldLabel: 'Radio group test',
    allowBlank: false,
    layout: {
        type: 'vbox'
    },
    items: [
        {
            boxLabel: 'Yes',
            name: 'radio',
            inputValue: 1
        },
        {
            boxLabel: 'No',
            name: 'radio',
            inputValue: 2
        }
    ],
    listeners: {
        change: function(rg, radio) {
            if (rg.lastValue.radio == 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 {
                    txt_test = Ext.getCmp('test');
                    if (txt_test) {
                        textfield_fieldset.remove(txt_test);
                    }
                    textfield_fieldset.doLayout();

            }
        }
    }
});

extjs删除/读取文本字段以形成错误？

3 个答案: