PDA

View Full Version : Submit Form Containing Tabpanel Not Submitting All Fields



jurban
22 Sep 2009, 9:17 AM
I have a popup window that contains a form. The form contains a TabPanel. The TabPanel contains 3 tabs. Each tab contains a Panel. Each panel (on each tab) contains several entry fields. Each entry field has a default value. If the user accepts the defaults and hits the submit button only the active tab's entry fields are sent to the server. In order for the entry fields on all three panels to be sent to the server the user has to select all three tabs. This is not acceptable to the user. How do I get the form to send all the fields across all the tabs?


Ext.onReady(function(){

var fPanel1 = new Ext.Panel({
title: 'Tab 1',
id: 'Panel1',
labelWidth: 150,
bodyStyle: 'padding:3px 3px 0',
items: [{
layout:'column',
items:[
{layout:'form',columnWidth:.5,items:
[
{xtype:'textfield', fieldLabel: 'Field 1.1', width:175, anchor:'95%', name: 'field_1_1', selectOnFocus:true, value:'1.1'},
{xtype:'textfield', fieldLabel: 'Field 1.2', width:175, anchor:'95%', name: 'field_1_2', selectOnFocus:true, value:'1.2'},
{xtype:'textfield', fieldLabel: 'Field 1.3', width:175, anchor:'95%', name: 'field_1_3', selectOnFocus:true, value:'1.3'},
{xtype:'textfield', fieldLabel: 'Field 1.4', width:175, anchor:'95%', name: 'field_1_4', selectOnFocus:true, value:'1.4'}
]},
{layout:'form',columnWidth:.5,items:
[
{xtype:'textfield', fieldLabel: 'Field 1.5', width:175, anchor:'95%', name: 'field_1_5', selectOnFocus:true, value:'1.5'},
{xtype:'textfield', fieldLabel: 'Field 1.6', width:175, anchor:'95%', name: 'field_1_6', selectOnFocus:true, value:'1.6'},
{xtype:'textfield', fieldLabel: 'Field 1.7', width:175, anchor:'95%', name: 'field_1_7', selectOnFocus:true, value:'1.7'},
{xtype:'textfield', fieldLabel: 'Field 1.8', width:175, anchor:'95%', name: 'field_1_8', selectOnFocus:true, value:'1.8'}
]}
]
}],
layoutConfig:{
animate:true
},
border:false
});

var fPanel2 = new Ext.Panel({
title: 'Tab 2',
id: 'Panel2',
labelWidth: 150,
bodyStyle: 'padding:3px 3px 0',
items: [{
layout:'column',
items:[
{layout:'form',columnWidth:.5,items:
[
{xtype:'textfield', fieldLabel: 'Field 2.1', width:175, anchor:'95%', name: 'field_2_1', selectOnFocus:true, value:'2.1'},
{xtype:'textfield', fieldLabel: 'Field 2.2', width:175, anchor:'95%', name: 'field_2_2', selectOnFocus:true, value:'2.2'},
{xtype:'textfield', fieldLabel: 'Field 2.3', width:175, anchor:'95%', name: 'field_2_3', selectOnFocus:true, value:'2.3'},
{xtype:'textfield', fieldLabel: 'Field 2.4', width:175, anchor:'95%', name: 'field_2_4', selectOnFocus:true, value:'2.4'}
]},
{layout:'form',columnWidth:.5,items:
[
{xtype:'textfield', fieldLabel: 'Field 2.5', width:175, anchor:'95%', name: 'field_2_5', selectOnFocus:true, value:'2.5'},
{xtype:'textfield', fieldLabel: 'Field 2.6', width:175, anchor:'95%', name: 'field_2_6', selectOnFocus:true, value:'2.6'},
{xtype:'textfield', fieldLabel: 'Field 2.7', width:175, anchor:'95%', name: 'field_2_7', selectOnFocus:true, value:'2.7'},
{xtype:'textfield', fieldLabel: 'Field 2.8', width:175, anchor:'95%', name: 'field_2_8', selectOnFocus:true, value:'2.8'}
]}
]
}],
layoutConfig:{
animate:true
},
border:false
});

var fPanel3 = new Ext.Panel({
title: 'Tab 3',
id: 'Panel3',
labelWidth: 150,
bodyStyle: 'padding:3px 3px 0',
items: [{
layout:'column',
items:[
{layout:'form',columnWidth:.5,items:
[
{xtype:'textfield', fieldLabel: 'Field 3.1', width:175, anchor:'95%', name: 'field_3_1', selectOnFocus:true, value:'3.1'},
{xtype:'textfield', fieldLabel: 'Field 3.2', width:175, anchor:'95%', name: 'field_3_2', selectOnFocus:true, value:'3.2'},
{xtype:'textfield', fieldLabel: 'Field 3.3', width:175, anchor:'95%', name: 'field_3_3', selectOnFocus:true, value:'3.3'},
{xtype:'textfield', fieldLabel: 'Field 3.4', width:175, anchor:'95%', name: 'field_3_4', selectOnFocus:true, value:'3.4'}
]},
{layout:'form',columnWidth:.5,items:
[
{xtype:'textfield', fieldLabel: 'Field 3.5', width:175, anchor:'95%', name: 'field_3_5', selectOnFocus:true, value:'3.5'},
{xtype:'textfield', fieldLabel: 'Field 3.6', width:175, anchor:'95%', name: 'field_3_6', selectOnFocus:true, value:'3.6'},
{xtype:'textfield', fieldLabel: 'Field 3.7', width:175, anchor:'95%', name: 'field_3_7', selectOnFocus:true, value:'3.7'},
{xtype:'textfield', fieldLabel: 'Field 3.8', width:175, anchor:'95%', name: 'field_3_8', selectOnFocus:true, value:'3.8'}
]}
]
}],
layoutConfig:{
animate:true
},
border:false
});

var fTabPanel = new Ext.TabPanel({
resizeTabs: true,
minTabWidth: 115,
tabWidth: 135,
enableTabScroll: true,
activeTab: 1,
layoutOnTabChange: true
});

fTabPanel.add(fPanel1).show();
fTabPanel.add(fPanel2).show();
fTabPanel.add(fPanel3).show();
fTabPanel.doLayout();
fTabPanel.activate('Panel1');
fTabPanel.setActiveTab(fPanel1);

var fForm = new Ext.form.FormPanel({
labelWidth :100,
border :false,
frame :true,
bodyStyle :'padding:3px 3px 0',
autoDestroy :false,
onFailure : function(form, action) {
alert(action.result.error || action.response.responseText);
},
items :[fTabPanel]
});

var GeneralEditWindow = new Ext.Window({
closeAction :'hide',
iconCls :'optsIcon',
title : 'Tab form window',
width :850,
height :475,
layout :'fit',
plain :true,
modal :true,
items :[fForm]
});

var submit = GeneralEditWindow.addButton({text :'Submit', handler : submitGeneralEditWindow});

GeneralEditWindow.show();

function submitGeneralEditWindow()
{
fForm.getForm().submit({url :'dumpData', waitMsg :'Saving Data...'});
}

fForm.on({actioncomplete : function(form, action) {
if (action.type == 'submit')
{
GeneralEditWindow.destroy();
}
}});

});

SchattenMann
22 Sep 2009, 9:47 AM
only fields from an active tab are submitted if the following line is not persent


deferredRender:false

jurban
22 Sep 2009, 9:56 AM
only fields from an active tab are submitted if the following line is not persent


deferredRender:true
Does this go in each Panel that makes up a tab, the TabPanel itself, the From or the Window? Sorry for the dumb question, but I have so many objects on this popup I get lost real quick.

Thanks!

hendricd
22 Sep 2009, 9:57 AM
I believe that's: only fields from rendered tabs will be sent, thus:

deferredRender : false

SchattenMann
22 Sep 2009, 10:07 AM
indeed my bad!

you have to put deferredRender:false in tabpanel



{
xtype:'tabpanel',
deferredRender:false,
items:[]
}

hendricd
22 Sep 2009, 10:10 AM
Does this go in each Panel that makes up a tab, the TabPanel itself, the From or the Window? Sorry for the dumb question, but I have so many objects on this popup I get lost real quick.

Thanks!

That belongs on the TabPanel config. ;)

jurban
22 Sep 2009, 11:06 AM
indeed my bad!

you have to put deferredRender:false in tabpanel



{
xtype:'tabpanel',
deferredRender:false,
items:[]
}

Thanks, that did the trick!

This thread can be closed.

smcguire36
24 May 2010, 6:04 AM
I had this same problem. Thanks for answering my question. That did the trick!

--Stewart McGuire

wm003
31 May 2010, 11:04 PM
Me too. Thanks a lot :)