PDA

View Full Version : Form not submitting with tabbed panel inide it



Codemaster Snake
23 Jul 2009, 3:46 AM
Hi all,
I am new to ExtJs, Just started today morning ;).
Well I have a problem! I have created a sample form, which has to submit data. It has tabbed panels in it. The problem I am facing is that:

* Whenever I click the save button, Only the fields from first tab gets posted.
* Only if I open the second panel and then click save, then the fields from second panel also gets posted.
Following is the source code


function create_candidate_window()
{
var candidate_form = new Ext.form.FormPanel({
method: 'get',
url: 'ext.html',
border: false,
items:[{
xtype:'tabpanel',
activeTab:0,
anchor:'100% 100%',
items:[{
title:'Peronal Details',
frame:true,
layout:'column',
labelWidth:100,
defaults:{padding: 5},
items:[{
columnWidth: .5,
layout: 'form',
defaults:{xtype:'textfield', anchor:'100%'},
items: [{
fieldLabel: 'First Name',
name: 'first_name',
},{
fieldLabel: 'Middle Name',
name: 'middle_name',
},{
fieldLabel: 'Last Name',
name: 'last_name',
}]
},{
columnWidth: .5,
layout: 'form',
defaults:{xtype:'textfield', anchor:'100%'},
items: [{
fieldLabel: 'Phone Number',
name: 'phone_number',
},{
fieldLabel: 'Email Address',
name: 'email_address',
},{
fieldLabel: 'Web Link',
name: 'web_address',
}]
},{
columnWidth: 1,
layout: 'form',
defaults:{xtype:'textfield', anchor:'100%'},
items: [{
xtype: 'textarea',
fieldLabel: 'Street Address',
name: 'address',
}]
},{
columnWidth: .5,
layout: 'form',
defaults:{xtype:'textfield', anchor:'100%'},
items: [{
fieldLabel: 'City',
name: 'city',
}]
},{
columnWidth: .5,
layout: 'form',
defaults:{xtype:'textfield', anchor:'100%'},
items: [{
fieldLabel: 'State',
name: 'state',
}]
},{
columnWidth: .5,
layout: 'form',
defaults:{xtype:'textfield', anchor:'100%'},
items: [{
fieldLabel: 'Gender',
name: 'gender',
},{
fieldLabel: 'Date Of Birth',
name: 'dob',
xtype: 'datefield'
},{
fieldLabel: 'Marital Status',
name: 'matital',
},{
fieldLabel: 'Girls',
name: 'girls',
},{
fieldLabel: 'Boys',
name: 'boys',
}]
},{
columnWidth: .5,
layout: 'form',
defaults:{xtype:'textfield', anchor:'100%'},
items: [{
fieldLabel: 'Spouse Name',
name: 'spouse',
},{
fieldLabel: 'Anniversary',
name: 'anniversary',
xtype: 'datefield'
}]
}]
},{
title: 'Academics',
layout: 'form',
defaults:{xtype:'textfield', anchor:'100%'},
items: [{
fieldLabel: 'Company Name',
name: 'company',
},{
fieldLabel: 'From Date',
name: 'fromdate',
xtype: 'datefield'
}]
}]
}]
})

var candidate_panel = new Ext.Window({

title:'New Candidate Form',
width:640,
height:480,
layout:'fit',
items:[candidate_form],
buttons:[{
text: 'Save',
handler: function(){
form = candidate_form.getForm();
form_as_dom = form.getEl().dom;
form_as_dom.action = form.url;
form_as_dom.submit();
/* candidate_form.getForm().submit({
method:'GET',
waitTitle:'Connecting',
waitMsg:'Sending data...',
success:function(){
Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
if (btn == 'ok'){
var redirect = 'dashboard.php';
document.location = redirect;
}
});
},

failure:function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Login Failed!', obj.errors.reason);
}else{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
}
candidate_form.getForm().reset();
}
});*/
}
},{
text:'Cancel'
}]
,tbar:[{
xtype:'datefield'
}, '-', {
text:'Button'
}]
});
candidate_panel.show();

}


Can anybody please tell me what is wrong? I ahve also checked dynamic.js file from ExtJs's examples page.

Regards

Condor
23 Jul 2009, 3:50 AM
1. Make your formpanel layout:'fit' instead of using anchor:'100% 100%' in the tabpanel.
2. Add the following options to the tabpanel config:

deferredRender: false,
layoutOnTabChange: true,
defaults: {hideMode: 'offsets'}
(you were looking for deferredRender:false and the other 2 options are required to make the other pages display properly when setting deferredRender:false)

Codemaster Snake
23 Jul 2009, 4:05 AM
Thanks a million buddy for such a swift reply. It's working now.
Cheers!