Extjs presenta il pannello multipepe all'interno di un Formpanel

Question

Hi im alla ricerca di un modo per inviare un modulo che contiene più moduli a schede. L'utente deve essere in grado di inviare tutti i dati da tutte le schede in un'unica presentazione da parte di POST. Il problema principale è che i dati non vengono inviati a meno che non vengano resi/aperti esplicitamente e quando vengono inviati non include gli altri moduli di tabulazione non renderizzati. :(

Ive stato alla ricerca di modi, ma in inutile Correggetemi se im sbagliato è questo qualcosa a che fare con

codice di esempio di associazione dati:.?

var fp = new Ext.FormPanel({ 
    renderTo: 'parti2', 
    fileUpload: true, 
    width: 866, 
    frame: true, 
    title: '   ', 
    autoHeight: true, 
    bodyStyle: 'padding: 10px 10px 0 10px;', 
    labelWidth: 130, 
    waitMsgTarget: 'mm_loader', 
    defaults: { 
     anchor: '95%',    
     msgTarget: 'side' 
    }, 
    { 
      /**** tab section ****/ 
      xtype:'tabpanel', 
     plain:true, 
     activeTab: 0, 
      autoHeight:true, 
     defaults:{bodyStyle:'padding:10px'}, 
     items:[{ 
      /**** new tab section ****/ 
      title:'Personal Details', 
      layout:'form', 
      defaults: {width: 230}, 
      defaultType: 'textfield', 
      items:[{ 
       xtype: 'textfield', 
       fieldLabel: 'First Name', 
       name: 'sec2_ab1', 

       },{ 
       xtype: 'textfield', 
       fieldLabel: 'Middle Name', 
       name: 'sec2_ab2', 

       },{ 
       xtype: 'textfield', 
       fieldLabel: 'Last Name', 
       name: 'sec2_ab3', 

       },{ 
       xtype: 'textfield', 
       fieldLabel: 'Nationality', 
       name: 'sec2_ab4' 

      },{ 
       xtype: 'textfield', 
       fieldLabel: 'Height', 
       name: 'sec2_ab13', 

      },{ 
       xtype: 'textfield', 
       fieldLabel: 'Education', 
       name: 'sec2_ab15', 

      }] 
      },{ 
       /**** new tab section ****/ 
      layout:'form', 
       title: 'Contract info', 
      autoHeight:true, 
      defaults: { 
       anchor: '95%', 

       msgTarget: 'side' 
      }, 
      defaultType: 'textfield', 
      items:[ 
       { 
       xtype: 'textfield', 
       fieldLabel: 'Monthly Salary', 
       name: 'section_ab5', 

      },{ 
       xtype: 'textfield', 
       fieldLabel: 'Work span', 
       name: 'section_ab4', 

      },{ 
       xtype: 'fileuploadfield', 
       id: 'form-file', 
       fieldLabel: 'Photo', 
       allowBlank: true, 
       msgTarget: 'side', 
       name: 'anyfile1', 
       buttonCfg: { 
        text: '', 
        iconCls: 'upload-icon' 
       } 
      }] 
      },{ 
       /**** new tab section ****/ 
      title: 'Knowledge of Languages', 
       layout:'form', 
      autoHeight:true, 
      defaults: { 
       anchor: '95%', 

       msgTarget: 'side' 
      }, 
      items:[combo_kl] 
      } ] /**** end tabs ****/ 

     },{ 
      html: ' ', autoHeight:true, border: false, height: 50, defaults: { anchor: '95%' } 
     } 
     ,{ 
      buttons: [{ 
      text: 'Reset Form', 
      handler: function(){ 
       fp.getForm().reset(); 
       } 
      },{ 
     text: 'Submit Form', 
     handler: function(){ 
      if(fp.getForm().isValid()){ 
       fp.getForm().submit({ 
        method:'POST', 
        url: '?handler/save', 
        waitMsg: 'Please wait as the Resume is being Send...', 

        success: function(fp, o){ 
         msg('Success', 'Processed file: "'+o.result.file+'" '); 
        }, 
        fail: function(fp, o) { 
          msg('Fail', 'erronious'); 
        } 
       }); 
      } 
     } 
    }] // button end 
    }] 

}); 

Answer 1

Prova ad aggiungere il seguente al vostro dichiarazione TabPanel:

deferredRender: false 

Questo dice al TabPanel di rendere tutto questo è immediatamente componenti figlio Attualmente il tuo TabPanel sta rendendo solo componenti visibili che è. causando problemi con il modulo di invio.

Answer 2

Grande! Questo ha funzionato perfettamente bene ora! Grazie! :)

Ho anche trovato altro modo di presentare i parametri del modulo pannello scheda, senza deferredRer, complessivamente aggiungendo:

params: fp.getForm().getFieldValues(true) 

sul comando di invio. :)

fp.getForm().submit({ 
    method: 'POST', 
    url: '?hander/save', 
    waitMsg: 'Please wait for the server response...', 
    params: fp.getForm().getFieldValues(true), 
    success: function (fp, o) { 
     msg('Success', 'Processed file: "' + o.result.file + '" '); 
    }, 
    fail: function (fp, o) { 
     msg('Fail', 'erronious'); 
    } 
});