Archive for 'Panel Layout'

What do you do if, you want to work with the vertical alignment your child panels?

While the align property of Layout will affect the horizontal alignment the pack property will affect the vertical align.
For example, the following code will align the child panels center horizontally and top vertically.

new Ext.Panel({
	layout: 'fit',
	items: [{
		layout: {
			type: 'vbox',
			align: 'center', pack: 'top'
		},
		scroll: 'vertical',
		items: []
	}]
});

Incoming search terms:

  • align center label sencha touch
  • layout a grid in sencha touch panel

Form Submit in Sencha Touch

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);

?>

Incoming search terms:

  • sencha touch form submit comple
  • senhca touch forms ios 7
We Can Build Your App for You. Lets Get Started !