Extjs submit multipe tabpanel внутри Formpanel

Question

Привет, я ищу способ отправить форму, содержащую несколько форм с вкладками. Пользователь должен иметь возможность отправлять все данные со всех вкладок в одном сообщении через POST. Основная проблема заключается в том, что данные не будут отправляться, если они явно не отображаются/не открываются, и при отправке его не включают другие непереработанные формы вкладок. :(

Ive искали способы, но в бесполезный Поправьте меня, если им неправильно это что-то делать с данными связывания

Пример кода:.?

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

Попробуйте добавить следующую строку в ваш TabPanel декларация:

deferredRender: false 

Это говорит TabPanel, чтобы сделать все это сразу же дочерние компоненты в настоящее время ваша TabPanel только рендерит видимые компоненты, которые есть. вызывая проблемы с формой submit.

Answer 2

Отлично! Это сработало отлично! Благодаря! :)

Я также нашел другой способ представить параметры на вкладке формы, расположенные на панели, без deferredRer, в целом, добавив:

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

по команде подать. :)

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