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

Posted 2023-02-26

【中文标题】extjs 删除/读取文本字段以形成错误？

【英文标题】：extjs remove/readd textfield to form bug?

【发布时间】：2011-04-27 07:40:19

【问题描述】：

我有一个表格，其中我有一个无线电组“是”，“否”。

当我单击“是”时，我使用配置选项将文本字段添加到表单上的字段集中：allowBlank：false。所以现场有验证。当我单击“否”时，所有字段都会从表单上存在的字段集中删除。

问题是当验证处于活动状态时，所以当您进入文本字段并单击离开它而不在其中输入任何字符并且我单击单选按钮“否”时，文本字段会消失并给我以下错误我抓住了它：

Element.alignToXY 带有一个不存在的元素

当我随后单击单选按钮“是”时，文本字段再次显示，但出现错误：

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);
                
            
        
    
);

【问题讨论】：

在 jsfiddle.net 上放一个更完整的示例并链接到它可能会更有用。

这是一个例子。只需从字段集中删除文本字段并添加到表单面板上的字段集...无线电组在同一个 textfield_fieldset 内...您还需要什么？

我也遇到了这个问题。根据返回的数据，我需要根据 AJAX 响应从头开始动态创建 FormPanel。可悲的是，这个错误完全破坏了原本有趣的努力。

请在下面查看我的答案。我遇到过几次类似的问题，这或多或少是我解决它的方法。

【参考方案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 中提交。

希望这会有所帮助。

【参考方案2】：

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

阅读您的代码后，我假设您正在创建一个带有 2 个项目（radiogroup 和 fieldset）的 formPanel，其中在字段集中，有一个 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();

【参考方案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();

            
        
    
);