Extjs nie może dynamicznie dodawać/usuwać pól w formpanelu

Question

Mam panel formularza, który używa układu tabeli do wyświetlania formularza. Muszę dodać funkcjonalność, aby dodać/usunąć zestaw komponentów.

Przycisk Dodaj powinien dodać nowy wiersz komponentów pod istniejącymi elementami. & Przycisk Usuń powinien usunąć ostatnio dodany wiersz.

Formpanel może dodać nowe pole, ale pojawia się pod przyciskami, a formularz nie zwiększa szerokości (zobacz zrzut ekranu poniżej). Próbowałem tego zarówno z funkcją wstawiania i dodawania, ale oba mają taki sam efekt.

Czy ktoś wie, jak: 1) Czy mogę dodać serię komponentów w następnym rzędzie? 2) Jak mogę usunąć następny wiersz.

Częściowa kod FormPanel kod & przycisk:

![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

Najprostszym sposobem byłoby mieć fieldset w formie, aby pomieścić wszystkie „wiersze”, a następnie dodać wiersz do tej fieldset korzystania fielset.add()

(Twój "wiersz" może być innym zestawem pól, który ma wszystkie pola)

Answer 2

Generowanie pól dynamicznych wydaje się być oczywiste i istnieje wiele przykładów oraz kilka blogów dla mootools itp., Ale w świecie extjs nie znalazłem działającego przykładu (prawdopodobnie dlatego, że większość ludzi używa potężnej siatki Extjs). Musiałem wymyślić jeden osobiście dla projektu MedAlyser! i im dzielę się nią z tobą. Może mieć błędy i/lub być niekompletne, ale mam nadzieję, że trochę pomaga.

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 

Usuwanie pól było bardziej skomplikowane, ponieważ przycisk usuwania musi dokładnie wiedzieć, które pole ma zostać usunięte. Ten kod tworzy nowe pola i usuwa je zgodnie z Twoimi żądaniami. Wszelkie sugestie są mile widziane.