From Learn About the Ext JavaScript Library

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.

Contents 1 The Form 2 Creating Form Fields 3 Completing The Form 4 What's Next?

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.

Next tutorial shows populating the form with data from the server and submitting that data back to the server: Loading Data Into and Submitting a Form

• Ext Programmer's API Documentation
• Ext User Forums