PDA

View Full Version : TabPanel Submit Form Problem



wizgabriel18
24 Jun 2008, 11:32 PM
Can anyone help me why submit form for the panel is not working? in normal form it works well but using the tabpanel it doesnt work?

Here the following codes i have:

Ext.onReady(function(){

// Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();

/*
* ================ Form 5 =======================
*/
//bd.createChild({tag: 'h2', html: 'User Registration'});

var tab2 = new Ext.FormPanel({

standardSubmit: true,


frame:true,
title: 'Adding Criteria Field Name',
labelAlign: 'top',
//title: 'Inner Tabs',
bodyStyle:'padding:5px',
width: 600,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: ''
},{
fieldLabel: 'Last Name',
name: 'last',
value: ''
},{
fieldLabel: 'Company',
name: 'company',
value: ''
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'Home',
name: 'home',
value: ''
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls:'x-plain',
title:'Biography',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Biography'
}
}]
}],

buttons: [{
text: 'Save',
handler: function() {
tab2.getForm().getEl().dom.action = './index.php?section=setup&subsection=criteria&action=criteriafield_add';
tab2.getForm().getEl().dom.method = 'POST';
tab2.getForm().submit();
}
},{
text: 'Cancel'
}]
});

tab2.render('a');
});
</script>

<div id="a" style="padding-top:50px;padding-left:250px;"></div>

grEvenX
8 Jul 2008, 11:31 AM
I'm also struggling with having the FormPanel's basic form submit the values of form-fields that are not directly items of the FormPanels, but like in your case the items of a column container with form layout, that again is the items of the FormPanel.

So to sum up:

// Code that does NOT work
formP = new Ext.form.FormPanel({
layout: 'column',
items: [
{layout: 'form', columnWidth: 0.5, items: [{xtype: 'textfield', hiddenName: 'field1'}]},
{layout: 'form', columnWidth: 0.5, items: [{xtype: 'textfield', hiddenName: 'field2'}]}
]
});
formP.getForm().submit();


// Code that WILL work
formP = new Ext.form.FormPanel({
items: [
{xtype: 'textfield', hiddenName: 'field1'},
{xtype: 'textfield', hiddenName: 'field2'}
]
});
formP.getForm().submit();


Anyone have any clue on how to get this working?

grEvenX
8 Jul 2008, 11:33 AM
Btw, this should for surely be moved to the Ext 2.x forums, why did you post it in 1.x?
The xtypes etc. was introduced in Ext 2.x?