extjs loại bỏ/readd textfield để tạo thành lỗi?

Question

Tôi có một hình thức mà tôi có một radiogroup 'có', 'không'.

Khi tôi nhấp vào 'có' tôi đã thêm trường văn bản vào một fieldset trên biểu mẫu có tùy chọn cấu hình: allowBlank: false. Vì vậy, có xác nhận trên lĩnh vực này. Khi tôi nhấp vào 'không', tất cả các trường sẽ bị xóa khỏi fieldset hiện diện trên biểu mẫu.

Vấn đề là khi xác thực đang hoạt động, vì vậy khi bạn đi vào bên trong trường văn bản và bạn nhấp vào nó mà không nhập bất kỳ ký tự nào vào đó và tôi nhấp vào nút 'không' trường văn bản biến mất và cung cấp cho tôi lỗi sau khi tôi bắt nó:

Element.alignToXY với một yếu tố không tồn tại

khi tôi nhấp vào sau đó vào radiobutton 'có', textField được hiển thị một lần nữa nhưng tôi nhận được một lỗi:

TypeError: dom is undefined

Tôi có thể bắt gặp những lỗi này và không làm gì với nó bởi vì trên thực tế biểu mẫu có vẻ đang hoạt động, các trường văn bản đã được thêm vào và bị xóa như cần, chỉ có lỗi và tôi không thích khái niệm đó. Có ai có một đầu mối tại sao lỗi này xảy ra và làm thế nào để thoát khỏi nó để nó làm việc 100% đúng cách?

Dưới đây là một ví dụ về mã:

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

đầu tiên, tại sao bạn lại thêm/tái loại bỏ một thành phần như vậy, ..
nếu tôi là bạn ... tôi sẽ sử dụng phương pháp ẩn/hiển thị của lớp textField ..

sau khi đọc mã của bạn, tôi giả định rằng bạn đang làm cho một formPanel với 2 mục (radiogroup và fieldset) nơi trong fieldset, có một textfield ... như vậy, guestly .. mybe như thế này ??

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

Tôi đã tạo ra một câu trả lời để trả lời câu hỏi này. Trường văn bản dường như được thêm/xóa đúng cách tại đó: http://jsfiddle.net/jaycode/PGSb7/4/

Chúc mừng.

Edit: Để hoàn chỉnh, tôi đoán tôi chỉ sẽ gửi mã ở đây cũng

---

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

Tôi đã thực hiện thành công không chỉ cho một số textbox, mà còn cho toàn bộ panel và hoạt động khá tốt. Trong trường hợp của tôi, bất kỳ số lượng nào của panel đều có thể được thêm và xóa một cách linh hoạt và nó hoạt động khá tốt.Các mã có liên quan mà tôi sử dụng là:

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

Và đối với remove tôi sử dụng,

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

Hai kết hợp làm việc cho tôi. Mặc dù tôi sẽ đề nghị rằng nếu bạn đang làm điều này chỉ cho một textbox, sau đó chuyển đổi nó thành một trường hidden và disable nó. Khi bạn disable một trường, nó sẽ không được gửi trong một post hoặc ajax post request.

Hy vọng điều này sẽ hữu ích.