extjs eliminar/leer campo de texto para formar un error?

Question

Tengo un formulario donde tengo un grupo de radio 'sí', 'no'.

Cuando hago clic en 'sí', tengo un campo de texto agregado a un fieldset en el formulario con la opción de configuración: allowBlank: false. Entonces hay validación en el campo. Cuando hago clic en 'no', todos los campos se eliminan del fieldset que está presente en el formulario.

El problema es cuando la validación está activa, así que cuando ingresas al campo de texto y haces clic sin ingresar ningún carácter y hago clic en el botón de radio 'no', el campo de texto desaparece y me da el siguiente error cuando lo cojo:

Element.alignToXY con un elemento que no existe

cuando hago clic después en el botón de radio 'sí', el campo de texto se muestra de nuevo pero me da un error:

TypeError: dom no está definido

Pude detectar estos errores y no hacer nada porque, de hecho, el formulario parece estar funcionando, los campos de texto se agregaron y eliminaron como debería, solo hay errores presentes y no me gusta su concepto. ¿Alguien tiene una pista de por qué ocurre este error y cómo deshacerse de él para que funcione correctamente al 100%?

Aquí se muestra un ejemplo del código:?

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

en primer lugar, ¿por qué volver a agregar/re-eliminar un componente de esa manera, ..
si fuera tú ... lo haré utilizar el método de ocultar/mostrar la clase de campo de texto ..

después de leer su código, asumiendo que usted es hacer una formPanel con 2 elementos (radiogroup y fieldset), donde en el conjunto de campos, hay una textfield ... así, guestly ... mybe como esto ??

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 2

he creado un jsFiddle responder a esta pregunta. El campo de texto parecía ser agregado/eliminado correctamente allí: http://jsfiddle.net/jaycode/PGSb7/4/

Cheers.

Editar: Para completar, supongo que voy a publicar el código aquí también

---

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

      } 
     } 
    } 
}); 

Answer 3

He hecho esto con éxito no solo por un textbox, sino por un entero panel, y funciona bastante bien. En mi caso, cualquier cantidad de panel se puede agregar y eliminar dinámicamente y funciona bastante bien.El código relevante que utilicé fueron:

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

Y para quitar i utilizada,

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

Estos dos en combinación funciona para mí. Aunque sugeriría que si está haciendo esto solo para un textbox, conviértalo en un campo hidden y disable. Cuando disable un campo, no se envía en un post, o ajax post request.

Espero que esto ayude.