From Learn About the Ext JavaScript Library

Este tutorial usa o FORM EMPLOYEE que nós criamos no tutorial getting started tutorial. Se você não está familiarizado como criar um FORM, então você deve fazer primeiro o tutorial citado.

Eu sugiro que você faça download do código fonte deste exemplo aqui, assim você já terá algo para começar a trabalhar. Você também pode encontrar o exemplo funcionando aqui.

Nós completaremos o ciclo de uso de formulários(FORM), de carregar o formulário com dados do usuário, e submeter esses dados para o servidor. No script do servidor é usado PHP e MySQL, porém este tutorial não é específico para PHP e MySQL e requer somente que você tenha uma maneira ler e gravar dados através do uso de JSON(Java Script Object Notation).

Vamos começar

Nós primeiramente precisamos configurar a url de nosso formulário(FORM), com este script php que lê os dados via POST para ler e gravar em nosso banco de dados.

var form_employee = new Ext.form.Form({
	...
	url:'forms-submit-process.php',
	...
});'''

Nossos dados consistem em cinco campos, id, name, title, hire_date e active, os quais serão lidos e gravados no Data Store.

O seguinte código configura o nosso Data Store, neste momento nenhum dado é recebido. Nosso Proxy referência um script php que recebe a linha de dados com id 14 e formata ele em um JSON string.

employee_data = new Ext.data.Store({
	proxy: new Ext.data.HttpProxy({url: 'forms-submit-getdata.php?id=14'}),
	reader: new Ext.data.JsonReader({},[ 'id', 'name', 'title', 'hire_date', 'active']),
	remoteSort: false
});

O próximo passo é configurar o nosso Event Listener para esperar quando os dados estiverem prontos, isso garante que não iremos tentar carregar o formulário sem dados.

employee_data.on('load', function() {
 
	// dados carregados, faça algo aqui... 
 
});

When that data is loaded we can take it and populate the form fields using setValue. Here we are using getAt(0) to retrieve the first row of data (row zero) from our data store. Quando os dados estão carregados nós podemos pega-los e carregar os campos do formulário usando o método setValue. Aqui nós estamos usando getAt(0) (recuperar a primeira linha de dados linha zero) de nosso Data Store.

NOTA: O formulário(FORM) e os campos do formulário(FORM FIELDS) usados aqui são definidos e explicados no Getting Started with Forms tutorial.

employee_name.setValue(employee_data.getAt(0).data.name);
employee_title.setValue(employee_data.getAt(0).data.title);
employee_hire_date.setValue(employee_data.getAt(0).data.hire_date);
employee_active.setValue(Ext.util.Format.boolean(employee_data.getAt(0).data.active));

Nós precisamos criar o nosso botão de submit e desenhar o formulário(FORM), lembrando de configurar o valor do identificador (id) para enviar junto com os dados de POST. Assim o nosso script PHP pode encontrar a linha que ele vai atualizar no banco de dados, veja linha id: employee_data.getAt(0).data.id.

Eu também estou usando o isValid para ter certeza de que os dados estão corretos antes de enviá-los.

form_employee.addButton('Save', function(){
	if (form_employee.isValid()) {
		form_employee.submit({
			params:{
				action:'submit',
				id:employee_data.getAt(0).data.id
			}, 
			waitMsg:'Saving...'
		});	
	}else{
		Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
	}
}, form_employee);
 
form_employee.render('employee-form');

Quando enviar, o dados do formulário(FORM), são passados para o servidor ao mesmo tempo. No servidor você pode pegar os dados do request. Assim como:request.getParameter("username").

Além disso, você pode validar o valor da entrada no servidor, se estiver errado, o servidor pode jogar de volta a mensagem de erro para a página com o formato JSON, exemplo: {error: [(id: username, msg: username já utilizado)]}

Carregando nossos dados

Agora vamos carregar os dados.

employee_data.load();

Realmente pode ser fácil criar um formulário(FORM) com o uso do Ext e com um nível bom de usabilidade. Com um par de scripts no servidor, podemos ler e formatar os dados de nosso banco de dados, e gravar de volta no banco. Estes scripts geralmente são simples e ocupam poucas linhas de código.

O que vem depois?

Como sempre, a documentação da API e os exemplos são um ótimo lugar para aprender como adaptar o formulário(FORM) para o seu uso e necessidade.

• Ext Programmer's API Documentation
• Ext User Forums