PDA

View Full Version : A simple Form Post Submit



StevenInc
28 Sep 2009, 5:16 PM
I am attempting to build a basic form that post form data to an action page and redirects the user to that page. (Just like normal XHTML forms behave)

I recreated the form from:
http://geekswithblogs.net/lszk/archive/2009/09/13/forms-with-ext-js-again.aspx

And I can get the form to work with the ajax, but after I add the standardSubmit,
I still can't read the form data and the user is not redirected.

Thank you.




Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../images/s.gif';
Ext.QuickTips.init();

var nameTextField = new Ext.form.TextField({
fieldLabel : 'Your name',
name : 'name'
});

var ageNumberField = new Ext.form.NumberField({
fieldLabel : 'Age',
name : 'age'
});

var genderM = new Ext.form.Radio({
fieldLabel: 'Sex',
name: 'sex',
boxLabel: 'male',
inputValue : 'M',
});

var genderF = new Ext.form.Radio({
fieldLabel: 'Sex',
name: 'sex',
boxLabel: 'female',
inputValue : 'F',
});

var myCheckBox = new Ext.form.Checkbox(
{
inputValue : 1,
name : 'siblings',
fieldLabel : 'Siblings'
}
);

var answers = new Ext.data.SimpleStore({
fields: ['id', 'answer'],
data: [['1', 'yes'], ['2', 'no']]
});


var myCommboBox = new Ext.form.ComboBox({
store: answers,
mode: 'local',
fieldLabel: 'available answers',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
});

var myDate = new Ext.form.DateField(
{
name: 'date',
fieldLabel: 'Select date',
anchor: '90%',
disabledDays: [0,6]
}
);

var myTimeField = new Ext.form.TimeField(
{
name: 'time',
fieldLabel: 'Time',
anchor: '90%'
}
);


var myTextArea = new Ext.form.TextArea ({
xtype: 'textarea',
name: 'area',
fieldLabel: 'Enter some text',
anchor: '90%',
multiline: true
});

var nameTextField = new Ext.form.TextField({
fieldLabel: 'Your name',
name: 'name',
allowBlank: false,
listeners: {
invalid: function(field, msg)
{
Ext.Msg.alert('', msg);
}
}
});

var form = new Ext.form.FormPanel({ //(1)
renderTo : Ext.getBody(), //(2)
url : 'action.cfm',
standardSubmit: true,
frame : true,
title : 'Tell me sth about yourself',
width : 250,
items : [
nameTextField,
ageNumberField,
genderM,
genderF,
myCheckBox,
myCommboBox,
myDate,
myTimeField,
myTextArea,
nameTextField
],
buttons: [{
text: 'Save',
handler: function()
{
form.getForm().submit({
success: function(a, b)
{
Ext.Msg.alert('Success', 'ok');
},
failure: function(a, b)
{
Ext.Msg.alert('Failure', b.result.error);
}
});
}
},
{
text: 'Reset',
handler: function()
{
form.getForm().reset();
}
}]
});


form.show();

});//onReady

StevenInc
29 Sep 2009, 5:07 AM
After some digging around I found this link, that explains in better detail how to use a standardSubmit:
http://www.extjs.com/learn/Manual:Forms:BasicForm:standardSubmit (http://www.extjs.com/forum/../learn/Manual:Forms:BasicForm:standardSubmit)

From that I was able to write:


buttons: [
{ text: "Save",
handler: function() {
if(form.getForm().isValid()){
if(form.url)form.getForm().getEl().dom.action=form.url;
if(form.baseParams){
for(i in form.baseParams){
form.add(
{ xtype:"hidden",
name:i,
value:form.baseParams[i]
})
}
form.doLayout();
}
form.getForm().submit();
}
}
},{
text: 'Reset',
handler: function()
{
form.getForm().reset();
}
}]

evant
29 Sep 2009, 5:10 AM
FYI this is corrected in SVN, specifying a url on the form panel will work properly with standardSubmit.