Extjs non può aggiungere/rimuovere campi dinamici nel pannello degli strumenti

Question

Ho un pannello dei moduli che utilizza un layout di tabella per visualizzare un modulo. Devo aggiungere funzionalità per aggiungere/rimuovere un set di componenti.

Il pulsante di aggiunta deve aggiungere una nuova riga di componenti al di sotto degli elementi esistenti & il pulsante di rimozione deve rimuovere l'ultima riga aggiunta.

Il modulo può aggiungere un nuovo campo ma appare sotto i pulsanti e il modulo non aumenta di larghezza (vedere la schermata di seguito). Ho provato questo con sia l'inserimento e aggiungere la funzione, ma entrambi hanno lo stesso effetto.

Qualcuno sa come: 1) Posso aggiungere una serie di componenti nella riga successiva? 2) Come posso rimuovere la riga successiva.

codice FormPanel codice & pulsante parziale:

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

modo più semplice sarebbe quella di avere un fieldset il modulo per contenere tutti i 'righe' e quindi aggiungere una riga a questo fieldset usando fielset.add()

(il tuo 'riga' può essere un altro fieldset che ha tutti i campi)

Answer 2

La generazione di campi dinamici sembra essere ovvia e ci sono molti esempi e alcuni blog per mootools, ecc. Ma nel mondo extjs non ho trovato un esempio funzionante (probabilmente perché molte persone usano la potente griglia Extjs). Ho dovuto inventarne uno da solo per il progetto MedAlyser! e sto condividendo con voi. Potrebbe avere bug e/o essere incompleto, ma spero che aiuti un po '.

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 

La rimozione dei campi è stata più complicata perché il pulsante di rimozione deve sapere esattamente quale campo deve essere rimosso. Questo codice crea nuovi campi e li rimuove correttamente come richiesto. Qualsiasi suggerimento è benvenuto.