Extjs submit multipe tabpanel inside a Formpanel - post

Question

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

Answer 1

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.

Answer 2

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