添加和刪除ExtJS表單域時遇到問題

Question

我在添加/刪除ExtJS表單域時遇到了一些問題。我的用例如下：

在窗體上提供一組單選按鈕。根據所選的單選按鈕，顯示一組不同的表單域。

我不是那麼熟悉ExtJS，但我正在做的是緩存要添加/刪除的字段，並在單選按鈕更改事件被觸發時從表單中添加/刪除它們。這裏是我的代碼的簡化版本：

var textFieldA = new Ext.form.TextField({ 
    fieldLabel: 'Text Field A', 
    name: 'text_field_a', 
    allowBlank: false 
}); 

var textFieldB = new Ext.form.TextField({ 
    fieldLabel: 'Text Field B', 
    name: 'text_field_b', 
    allowBlank: false 
}); 

var form = new Ext.FormPanel({ 
    autoScroll: true, 
    bodyStyle: 'padding: 5px 5px 0', 
    border: false, 
    frame: true, 
    layout: 'form', 
    items: [{ 
     xtype: 'fieldset', 
     fieldLabel: 'Fieldset', 
     autoHeight: true, 
     items: [{ 
      xtype: 'radiogroup', 
      fieldLabel: 'Show text field', 
      columns: 1, 
      vertical: true, 
      items: [ 
       { 
        xtype: 'radio', 
        boxLabel: 'Show field a', 
        name: 'field_to_show', 
        inputValue: 'a' 
       }, 
       { 
        xtype: 'radio', 
        boxLabel: 'Show field b', 
        name: 'field_to_show', 
        inputValue: 'b' 
       } 
      ], 
      listeners: { 
       'change': { 
        fn: function(radioGroup, selectedRadio) { 
         switch (selectedRadio.getGroupValue()) 
         { 
          case 'a': 
           radioGroup.findParentByType('fieldset').remove(textFieldB); 
           radioGroup.findParentByType('fieldset').add(textFieldA); 
           break; 
          case 'b': 
           radioGroup.findParentByType('fieldset').remove(textFieldA); 
           radioGroup.findParentByType('fieldset').add(textFieldB); 
           break; 
         } 
         radioGroup.findParentByType('fieldset').doLayout(); 
        } 
       } 
      } 
     }] 
    }] 
}); 

form.render('container'); 

此作品第一次被選中每個無線，但後續選擇不工作，我期望的那樣。在Firefox中，會出現JavaScript錯誤：

不支持操作「code：」9 [Break on this error] return !!（p.compareDocumentPosition（c）& 16）;在ext-base-debug-w-comments.js中

在Chrome中，只有標籤會被添加到表單中。

我期待這種方式工作不正確嗎？

Answer 1

我不會使用必然需要添加/刪除的fileds-爲什麼不給每個字段的ID（也很好的做法表單域）的方法：

id:'fieldname' 

然後要麼隱藏/顯示領域適當使用：

Ext.getCmp('fieldname').hide() 
Ext.getCmp('fieldname').show() 

Answer 2

我寫了一個非常相似的形式。如果唯一的通用元素是無線電組，那麼我建議：

創建一個外部容器，其中包含RadioGroup，然後是具有CardLayout的子容器。該卡布局的每個孩子都包含一個帶有RadioGroup不同狀態字段的表單。將收聽者添加到RadioGroup中，以便選擇更改時更改卡容器中的活動項目。

Basic代碼來讓你從當我這樣做開始：

OuterForm = Ext.extend(Ext.Container, { 
    initComponent: function() { 
     Ext.apply(this, { 
      layout: "vbox", 
      layoutConfig: { align: "stretch" } 
     }); 
     this.items = [{ 
      xtype: "container", 
      layout: "form", 
      items: [{ 
       xtype: "radiogroup", 
       fieldLabel: "Form to fill out", 
       ref: "../../formSelector", 
       items: [{ 
        name: "type", 
        inputValue: "1", 
        boxLabel: "Form 1" 
       }, { 
        name: "type", 
        inputValue: "2", 
        boxLabel: "Form 2" 
       }], 
       listeners: { 
        scope: this, 
        change: function(rg, checkedItem) { 
         this.formContainer.layout.setActiveItem(parseInt(checkedItem.inputValue)); 
        } 
       } 
      }] 
     }, { 
      xtype: "container", 
      layout: "card", 
      flex: 1, 
      ref: "formContainer", 
      items: [{ 
       xtype: "form1" 
      }, { 
       xtype: "form2" 
      }] 
     }]; 

     OuterForm.superclass.initComponent.call(this); 
    } 
}); 

沒有測試過錯別字/錯誤，但只設置一個高度爲外在形式，創建Form 1和Form xtypes，它應該工作。

如果您需要所有字段是同一個表單的一部分，請使OuterForm擴展FormPanel，而不是將form1和form2定義爲獨立的FormPanel。