Extjs formpanel

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

डायनामिक फॉर्म फ़ील्ड पीढ़ी स्पष्ट प्रतीत होती है और बहुत सारे उदाहरण हैं और मूटूल इत्यादि के लिए कुछ ब्लॉग हैं लेकिन दुनिया में 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 

फ़ील्ड को हटाने से अधिक जटिल था क्योंकि निकालने के बटन को यह जानने की जरूरत है कि कौन से फ़ील्ड को हटाना है। यह कोड नए फ़ील्ड बनाता है और जैसा कि आपने पूछा था, उन्हें सही तरीके से हटा देता है। किसी भी सुझाव का स्वागत है।