From Learn About the Ext JavaScript Library

Eu sugiro que você baixe o código fonte usado aqui, assim você terá algo para começar. O exemplo funcionando pode ser acessado aqui.

Contents 1 O Form 2 Criando os campos do FORM 3 Completando o FORM 4 O que vem a seguir?

O Form

A primeira coisa que nós precisamos fazer é criar nosso FORM, isto pode ser comparado a escrever uma TAG <form> no HTML.

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

Criando os campos do FORM

O nosso FORM de exemplo conterá quatro campos, name, title, hire_date e active. Os dois primeiros, name e title são apenas campos de texto simples, para isto estamos usando um TextField neles.

Uma opção importante de configuração aqui é name, que trabalha justamente como suas contrapartes em HTML para definir o nome do campo.

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

O próximo campo, hire_date é uma data, então nós iremos utilizar um DateField que nós fornece um selecionador de datas.

O formato das configurações usa a mesma sintaxe usada em PHP date formatting(formatação de datas). Essa STRING nós precisamos para ajustar o formato de data que você utiliza.

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

Nosso último elemento active é um valor booleano, então nós utilizaremos um Checkbox.

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

Completando o FORM

Agora nós iremos adicionar todos os campos ao fieldset, que irá incluir no FORM estes campos. Alternativamente você também pode utilizar o método add no lugar de fieldset se você não deseja usar um fieldset com bordas.

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

E por último mas não menos importante, o botão submit é adicionado ao FORM usando o método addButton da classe Ext.form.Form com um mínimo de verificação de erros quando o botão é clicado. Chamando render e passando o id da sua TAG div> nós desenharemos o formulário dentro da sua TAG div em sua página.

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

O que vem a seguir?

Enquanto este tutorial mostra para nós como criar um FORM, não existe como enviar dados para o outro lado do servidor, ou seja é como um carro sem motor, pode parecer bonito, mas não leva você a lugar nenhum. Portanto mãos a obra para construir o motor.

• Ext Programmer's API Documentation
• Ext User Forums