Sencha Inc. | HTML5 Apps

Loading Data Into and Submitting a Form

Published May 23, 2007 | Shea Frederick | Tutorial | Medium
Last Updated Jul 11, 2011

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

This tutorial continues, and uses the employee edit form used in, the 'Getting Started with Forms' tutorial. If you are not yet familiar with creating a form then you should start with that tutorial first.

I would suggest downloading the code used for this example so you have something to work with. You can also find a working example.

We will go through the full circle of using forms, from populating the form with data from the server, to submitting that data back to the server. The back end I use is PHP and MySQL, however this tutorial is not specific to PHP and MySQL and only requires that you have a way to read and output JSON data on your server.

Let's Get Started

We first need to set our form's url, which is a php script that will take POST data and write it to our database.

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

Our data consist of five fields, id, name, title, hire_date and active, which will be retrieved and placed into a data store.

The following code sets up the data store, at this point no data has been retrieved. Our proxy references a php script that retrieves row id 14 from our database and formats it as a 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
});

The next thing to do is setup our event listener to watch for when the data loads, this ensures that we don't populate the form before the data has been loaded.

employee_data.on('load', function() {
 
	// data loaded, do something with it here... 
 
});

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.

NOTE: the form and form fields used here are defined and explained in the 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));

We will also want to create our submit button and render the form, remembering to set extra parameters to pass along with our POST data from the form fields. You will find it useful to pass a row identifier (id) so the php script knows which row to update in the database, along with an action just for good measure.

I'm also using isValid to make sure the form conforms to each field's requirements before submitting.

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

When submit, form parameters are passed to the server at the same time. On server side, you can catch them with request. Such as: request.getParameter("username")

Furthermore, you can validate the input value in server side, if it is wrong, server-side can throw error message back to page with JSON format, such as: {errors:[{id:'username', msg: 'username already used'}]}

Loading Our Data

Now we load the data.

employee_data.load();

It really can be just that easy to create a working Ext form with an amazing level of usability right out of the box. With a couple of server side scripts that retrieve and format data from our database, and write that data back to our database. These server side scripts can be as simple as a few lines.

What's Next?

As always, the API documentation and examples are a great way to learn how to tweak this form to fit your needs.

Share this post:
Leave a reply

Written by Shea Frederick

Commenting is not available in this channel entry.