Extjs envíe el tabpanel multipe dentro de un Formpanel

Question

Hola estoy buscando una manera de enviar un formulario que contiene múltiples formularios con pestañas. El usuario debe poder enviar la información completa de todas las pestañas en un solo envío por POST. El principal problema es que los datos no se enviarán a menos que se muestren o abran explícitamente y, al enviarlos, no incluyan los otros formularios de pestañas sin procesar. :(

he estado buscando maneras pero en vano Corrígeme si estoy equivocado es esto algo que ver con

Código de ejemplo de enlace de datos:.?

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

Trate de añadir lo siguiente a su Declaración TabPanel:

deferredRender: false 

Esto le dice al TabPanel para hacer todos sus componentes niño inmediatamente Actualmente su TabPanel única es la prestación de los componentes visibles que es. causando problemas con el envío del formulario.

Answer 2

¡Estupendo! Eso funcionó perfectamente bien ahora! ¡Gracias! :)

también encontré otra manera de presentar los parámetros de la forma panel de pestañas, sin deferredRer, en conjunto, añadiendo:

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

en el comando de enviar. :)

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'); 
    } 
});