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

Question

我有一个表格,我有一个放射性组'是','不'.

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

问题是当验证处于活动状态时,所以当你进入文本区域并点击它而没有输入任何字符时,我点击radiobutton'no'文本字段消失,当我抓住它时给我以下错误:

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

首先，你为什么要重新添加/重新删除这样的组件？，..
如果我是你...我将使用文本字段类的隐藏/显示方法..

读完你的代码后，我假设你正在制作一个formPanel包含 2 个项目（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();