In today's tutorial we are going to learn how to manipulate information in JSON format with a Store and request the information to the server with Ajax.

Resources

The example we're going to do in this tutorial will be the same as the previous tutorials, we will only change the information source. So please download the resources, unzip them and copy the files inside of the folder "ajax" that we created at the beginning of this chapter.

The information

The information we're going to use is using the format JSON like this:

<?php
	header("Content-Type: text/plain"); 
	
	echo "{
		total:9,
		data:[{
			id: 1,
			name: 'Crysfel',
			occupation: 'Software developer',
			gender: 'm',
			age: 25
		},{
			id: 2,
			name: 'Sasha',
			occupation: 'Figure skater',
			gender: 'f',
			age: 24
		},{
			id: 3,
			name: 'Jack',
			occupation: 'Software Architect',
			gender: 'm',
			age: 35
		},{
			id: 4,
			name: 'John',
			occupation: 'Javascript developer',
			gender: 'm',
			age: 22
		},{
			id: 5,
			name: 'Sara',
			occupation: 'Designer',
			gender: 'f',
			age: 31
		},{
			id: 6,
			name: 'Nicole',
			occupation: 'Tester',
			gender: 'f',
			age: 31
		},{
			id: 7,
			name: 'Carl',
			occupation: 'Photographer',
			gender: 'm',
			age: 45
		},{
			id: 8,
			name: 'Will',
			occupation: 'Actor',
			gender: 'm',
			age: 32
		},{
			id: 9,
			name: 'Penny',
			occupation: 'Waitress',
			gender: 'f',
			age: 28
		}]
	}";
?>

This code is found inside of the file "jsondata.php" that you downloaded from the resources; just remember that to make this tutorial simple I wrote the information directly in the code, but in the real world the information can come from a database, a Web service or some other place.

Creating the Store

We can create a Store to manipulate the information in JSON format in two different ways, one is doing the same thing as the previous tutorial and just change the XML "reader" for another one that reads JSON and define the property "root", which is where we have the records.

//create the "Person" record
var Person = Ext.data.Record.create([
	{name: 'name', mapping: 'name'},// "mapping" property not needed if it is the same as "name"
	{name: 'occupation'}, // This field will use "occupation" as the mapping.
	{name: 'age', type:'float'}, // this field will use "age" as the mapping and its a float type
	{name: 'gender'}
]);
		
//creates the reader for the JSON data
var reader = new Ext.data.JsonReader({ 
totalProperty: 'total', // The element which contains the total dataset size (optional)
   	root: 'data',        // The repeated element which contains row information
	id: 'id'                 // The element within the row that provides an ID for the record (optional)
}, Person);
		
//creates the proxy
var proxy = new Ext.data.HttpProxy({
	method:'POST', //configure the http method GET or POST
	url: 'jsondata.php' //the URL for the ajax call
}); 
		
//creates the Ext.data.Store
this.store = new Ext.data.Store({
	proxy: proxy, //setting the proxy
	reader: reader //setting the reader
});

As you can see, the code is very similar to the example we saw with XML in the previous tutorial, we only changed a few lines. The other alternative we have is to use the object "JsonStore", which already has a JSON reader and a Proxy reader to make the requests to the server in Ajax, by using this method we can decrease the lines of our code.

this.store = new Ext.data.JsonStore({
	url: 'jsondata.php',
	root: 'data',
	fields: ['name','occupation','gender',{name:'age',type:'float'}]
});

In the property "url" we request the information with Ajax, in the property "root" we have the records we are going to use for the store and in the property "fields" we have the array where we need to specify the fields of the records we're going to receive. We can define the name of the property or use an object that has the following properties: name, mapping and information type.

The rest of the code

I have explained the rest of the code in previous tutorials, but basically the only thing we need to do is add a "listener" to the click event of the buttons that we have in the HTML document so we can filter the records later using the criteria we need.

Conclusions

The JSON format es very easy to manipulate, because creating a store for this kind of format is not complicated at all and we can do it in a few lines of code. If you have noticed, the Store is a very important component of the Framework, specially because it was planned to support different information formats. In the following tutorials of this course we are going to be using this component in the forms, the grids, the views and other components every time we need to manipulate information. As always, your questions or suggestions are very welcome and don't forget to subscribe to our Feedsor fallow us on Twitter so you can be updated.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!