Here is the code for a simple form submit in Sencha Touch:
var myForm = new Ext.Panel({
layout: 'card',
dockedItems: [{
xtype: 'toolbar',
docked: 'top',
title: 'Test Form'
}],
items: [{
xtype: 'form',
title: 'My Form',
id: 'register',
items: [{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Some instruction for personal info',
defaults: {
labelWidth: '40%'
},
items: [{
xtype: 'datepickerfield',
name: 'dob',
label: 'Date of birth',
required: true,
useClearIcon: true,
picker: {yearFrom: 1900}
}, {
xtype: 'selectfield',
name: 'gender',
label: 'Gender',
required: true,
useClearIcon: true,
options: [{
text: 'Male',
value: 'male'
}, {
text: 'Female',
value: 'female'
}]
}, {
xtype: 'textfield',
name: 'phone_number',
label: 'Phone number',
placeHolder: 'Enter..',
required: false,
useClearIcon: true,
}]
},
{
xtype: 'fieldset',
title: 'Login Info',
instructions: 'Some instruction for login info',
defaults: {
labelWidth: '40%'
},
items: [{
xtype: 'emailfield',
name: 'email',
label: 'Email',
placeHolder: 'me@abc.com',
required: true,
useClearIcon: true,
}, {
xtype: 'passwordfield',
name: 'password',
label: 'Password',
required: true,
useClearIcon: true,
}, {
xtype: 'passwordfield',
name: 'repeat_password',
label: 'Re-type password',
required: true,
useClearIcon: true,
}]
}, {
xtype: 'button',
text: 'Register',
scope: this,
handler: function (b, e) {
var form = Ext.getCmp('register');
form.submit({
url: 'testform.php',
method: 'POST',
success: function (frm, res) {
alert('Form submitted: ' + res.customfield);
},
failure: function (frm, res) {
alert('Form no submit!');
}
});
}
}
}]
});
This is testform.php:
It is very important to send success => true
If, success is not defined or not equal to true then it will be considered as a form submit error.
<?php
$response = array('success' => true, 'customfield' => 'custom value');
echo json_encode($response);
?>