Extjs submit multipe tabpanel inside a Formpanel

Hi im looking for a way to submit a form that contains multiple tabbed forms. The user must be able to submit the entire data from all tabs at a single submit by POST. The major problem is that the data wont submit unless it is explicitly rendered / opened and when submitting it does not include the other un-rendered tab forms. :(

Ive been looking for ways but in futile. Correct me if im wrong is this something to do with data-binding?

Sample code:

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
    }]

});

Try adding the following to your TabPanel declaration:

deferredRender: false

This tells the TabPanel to render all of it's child components immediately. Currently your TabPanel is only rendering visible components which is causing problems with the form submit.

Great! That worked perfectly fine now! Thanks! :)

I also found other way to submit the tab panel form's parameters, without deferredRer, altogether by adding:

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

on the submit command. :)

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