Sencha Inc. | HTML5 Apps

Getting Started with Forms

Published May 08, 2007 | Shea Frederick | Tutorial | Easy
Last Updated Jul 10, 2011

This Tutorial is most relevant to Ext JS, 2.x, 3.x.

I would suggest downloading the code used for this example here so you have something to work with. A working example can be found here.

The Form

First thing we need to do is create our form, this could be compared to writing a <form> tag in HTML.

var form_employee = new Ext.form.Form({
	labelAlign: 'right',
	labelWidth: 175,
	buttonAlign: 'right'
});

Creating Form Fields

Our example form will consist of four fields, name, title, hire_date and active. The first two, name and title are just plain text fields, so we're going to use a TextField for them.

The important config option here is name, which works just like its HTML counterpart to define the name of the field.

var employee_name = new Ext.form.TextField({
	fieldLabel: 'Name',
	name: 'name',
	width:190
});
 
var employee_title = new Ext.form.TextField({
	fieldLabel: 'Title',
	name: 'title',
	width:190
});

The next field, hire_date is a date, so we're going to use a DateField which will give us a fancy date picker.

The format config option uses the same date syntax as defined for PHP date formatting. This format string will need to be adjusted to match the format of the date you are using.

var employee_hire_date = new Ext.form.DateField({
	fieldLabel: 'Hire Date',
	name: 'hire_date',
	width:90,
	allowBlank:false,
	format:'m-d-Y'
});

Our last form element active is a boolean value, so let's use a Checkbox.

var employee_active = new Ext.form.Checkbox({
	fieldLabel: 'Active',
	name: 'active'
});

Completing The Form

Now we are going to add all of our form fields to a fieldset, which will include these fields in your form. Alternatively you could use add in place of fieldset if you don't want the field set outline.

form_employee.fieldset(
	{legend:'Employee Edit'},
	employee_name,
	employee_title,
	employee_hire_date,
	employee_active
)

Last but not least, the submit button is added to the form using addButton along with a small bit of error checking for when the button is clicked. Calling render and passing it the id of our div tag will draw our form inside our div tag on the web page.

form_employee.addButton('Save', function(){
	if (form_employee.isValid()) {
		Ext.Msg.alert('Success', 'Your form is valid!.');
	}else{
		Ext.Msg.alert('Errors', 'Please fix the errors noted.');
	}
}, form_employee);
 
form_employee.render('employee-form');

What's Next?

While this tutorial does show you how to create a form, there is no back end portion in place to do anything, so the form created in this tutorial is like a car with no engine - it may look pretty, but it wont get you very far.

The next tutorial, called 'Loading Data Into and Submitting a Form', shows populating the form with data from the server and submitting that data back to the server.

Share this post:
Leave a reply

Written by Shea Frederick

Commenting is not available in this channel entry.