Extjsはフォームパネルにフィールドを動的に追加/削除できません

Question

テーブルレイアウトを使用してフォームを表示するフォームパネルがあります。私は、一連のコンポーネントを追加/削除する機能を追加する必要があります。

追加ボタンは、既存の要素の下に新しいコンポーネント行を追加する必要があります。&削除ボタンは最後に追加された行を削除する必要があります。

フォームパネルは新しいフィールドを追加できますが、ボタンの下に表示され、フォームの幅が増えていません（下のスクリーンショットを参照）。私は両方の挿入と追加機能でこれを試してみましたが、どちらも同じ効果があります。

どのように知っていますか： 1）次の行に一連のコンポーネントを追加できますか？ 2）次の行を削除する方法。

部分formPanelコード&ボタンコード：

![SearchForm = Ext.extend(Ext.FormPanel, { 
    id: 'myForm' 
    ,title: 'Search Form' 
    ,frame:true  
    ,waitMessage: 'Please wait.' 
    //,labelWidth:80  
    ,initComponent: function() {  
     var config = {     
      items: [{ 
       layout:{ 
        type:'table', 
        columns:5 
       }, 
       buttonAlign:'center', 

       defaults:{ 
        //width:150, 
        //bodyStyle:'padding:100px' 
        style:'margin-left:20px;' 
       },    
       items:[//row 1 
         {      
          xtype: 'label', 
          name: 'dateLabel', 
          cls: 'f', 
          text: "Required:"     
         }, 
         { 
          xtype: 'container', 
          layout: 'form', 
          items: { 
           xtype: 'datefield', 
           fieldLabel: "From Date", 
           value: yesterday, 
           width: 110, 
           id: 'date1'             
          } 
         }][1] 
buttons: [{ 
          text: 'Add More Criteria (max 10 items)', 
          id: "addBtn",     
          scope: this, 
          handler: function(){ 
           alert('hi'); 
           /*this.items.add({ 
            xtype : 'textfield', 
            fieldLabel : 'Extra Field', 
            name : 'yourName', 
            id : 'yourName' 
           }); */ 
           this.insert(4,{ 
             xtype: 'textfield', 
             id: 'input20', 
             //hideLabel: true, 
             width: 180, 
             fieldLabel: 'hi' 
            }); 
           this.doLayout(); 
          } 
       } 

Answer 1

最も簡単な方法は、すべての「行」を保持した後、使用してこのfieldsetに行を追加する形でfieldsetを持っているであろうfielset.add()

（あなたの「行」は、すべてのフィールドを持つ別のフィールドセットにすることができます）

Answer 2

動的なフォームフィールドの生成は明らかで、mootoolsなどのサンプルやブログがたくさんありますが、extjsの世界では、実際の例を見つけることができませんでした（おそらくほとんどの人が強力なExtjsグリッドを使用するためです）。 MedAlyserプロジェクトのために自分で！私はあなたにバグや不完全なことがあるかもしれませんが、少し助けてくれることを願っています。

function addressCounter(incr) { 
    if (!this.no) { 
     this.no = 0; 
    } else { 
     this.no = this.no + 1; 
    }; 
}; 
var counter = new addressCounter(); 
console.log(counter.no); 
//put below code inside your form items  
{ 
    xtype: 'button', 
    text: 'Add address ', 
    id: 'addaddress', 
    handler: function() { 
     counter.no = counter.no + 1; 
     console.log(counter.no); 
     Ext.getCmp('patientaddress').add([{ 
      xtype: 'combo', 
      store: 'AddressType', 
      displayField: 'name', 
      valueField: 'name', 
      fieldLabel: 'Address Type', 
      id: 'addresstype' + counter.no, 
      name: "Patientaddress[addresstype][]", 
      value: 'Home' 
     }, { 
      fieldLabel: 'zip', 
      width: 160, 
      maxLength: 10, 
      enforceMaxLength: true, 
      maskRe: /[\d\-]/, 
      regex: /^\d{5}(\-\d{4})?$/, 
      regexText: 'Must be in the format xxxxx or xxxxx-xxxx', 
      name: "Patientaddress[zip][]", 
      id: 'zip' + counter.no 
     }, { 
      fieldLabel: 'Address 1', 
      name: "Patientaddress[address1][]", 
      id: 'address1' + counter.no 
     }, { 
      fieldLabel: 'Address 2', 
      name: "Patientaddress[address2][]", 
      id: 'address2' + counter.no 
     }, { 
      fieldLabel: 'City', 
      name: "Patientaddress[city][]", 
      id: 'city' + counter.no 
     }, { 
      fieldLabel: 'State', 
      name: "Patientaddress[state][]", 
      id: 'state' + counter.no 
     }, { 
      xtype: 'combo', 
      store: Ext.create('MA.store.Countries'), 
      displayField: 'name', 
      valueField: 'id', 
      forceSelection: true, 
      fieldLabel: 'Country', 
      typeAhead: true, 
      queryMode: 'local', 
      name: "Patientaddress[country][]", 
      id: 'country' + counter.no 
     } // eof 
     // countries; 
     , 
     Ext.getCmp('addaddress'), { 
      xtype: 'button', 
      text: 'Remove address', 
      id: 'removeaddress' + counter.no, 
      handler: function (
      thisButton, eventObject) { 

       activeRemoveButtonId = thisButton.getId().split('removeaddress')[1]; 

       console.log('activeRemoveButtonID:' + activeRemoveButtonId); 
       Ext.getCmp('patientaddress').remove('address1' + activeRemoveButtonId); 
       Ext.getCmp('patientaddress').remove('address2' + activeRemoveButtonId); 
       Ext.getCmp('patientaddress').remove('city' + activeRemoveButtonId); 
       Ext.getCmp('patientaddress').remove('state' + activeRemoveButtonId); 
       Ext.getCmp('patientaddress').remove('country' + activeRemoveButtonId); 
       Ext.getCmp('patientaddress').remove('removeaddress' + activeRemoveButtonId); 
       Ext.getCmp('patientaddress').remove('addresstype' + activeRemoveButtonId); 
       Ext.getCmp('patientaddress').remove('zip' + activeRemoveButtonId); 

       Ext.getCmp('patientaddress').doLayout(); 
      } 
     }]); 
     Ext.getCmp('patientaddress').doLayout(); 

    } // eof function 
}, // eof Add button 

フィールドの削除は、削除ボタンが削除するフィールドを正確に把握する必要があるため、より複雑でした。このコードは、新しいフィールドを作成し、要求どおりに正しく削除します。提案は大歓迎です。