Blog

Resources

To continue we need to download the resources, and copy the three files within our Web server, we have been working inside the folder “course” where we already have the Ext JS library and we already created a folder called “grids” for this chapter.

I have prepared a demo to show you what we’re going to do in this tutorial.

Packaging the code

We know that packaging our code is really important and is a good practice, so let’s create the namespace for this tutorial.

Ext.ns('com.quizzpot.tutorial');

com.quizzpot.tutorial.GridXmlTutorial = {
	init: function(){
		//code goes here
	}
}

Ext.onReady(com.quizzpot.tutorial.GridXmlTutorial.init,com.quizzpot.tutorial.GridXmlTutorial);

The XML we’re going to use

We will use XML as our data source, such data may be contained in a database, Web service, file, etc..To make things simpler in this example I have put information directly in the source code as follows:

<?php
	header("Content-Type: text/xml"); 

	echo '<?xml version="1.0" encoding="UTF-8"?>';
?>

<people>
	<person>
		<name>Jack Slocum</name>
		<age>32</age>
		<position>Chief Software Architect and Founder</position>
		<company>Ext JS</company>
	</person>
	<person>
		<name>Sasha Cohen</name>
		<age>24</age>
		<position>Figure Skating</position>
		<company></company>
	</person>
	<person>
		<name>John Resig</name>
		<age>24</age>
		<position>JavaScript Developer</position>
		<company>Mozilla Corporation</company>
	</person>
	<person>
		<name>Sara Mcfly</name>
		<age>35</age>
		<position>Tester</position>
		<company>Google</company>
	</person>
	<person>
		<name>Crysfel Villa</name>
		<age>25</age>
		<position>Software Developer</position>
		<company>JWM Solutions</company>
	</person>
	<person>
		<name>Felicia Day</name>
		<age>30</age>
		<position>Actress</position>
		<company></company>
	</person>
	<person>
		<name>Collis Ta'eed</name>
		<age>29</age>
		<position>CEO</position>
		<company>Envato</company>
	</person>
</people>

The record “Person”

We’re going to display the information in XML on the grid, these are facts of people, therefore we need to create the record “Person” and map it to the node “person” of XML.

var Person = Ext.data.Record.create([
	{name: 'name'},
	{name: 'position'},
	{name: 'age', type:'float'},
	{name: 'company'}
]);

Creating the “Reader”

Now let’s create the “reader” that will be assigned to the “store”:

var reader = new Ext.data.XmlReader({
	record: "person"
}, Person);

In the previous code we have defined in the configuration of the XmlReader, the property “record” with the value “person”, by doing this the “reader” will be able to go to the node “person” (in XML) and retrieve the information contained in the object “Person”.

Creating the Store and loading information

The next step is to create the “Store” and load the XML information like this:

var store = new Ext.data.Store({
	url: 'xml.php',
	reader: reader
});

store.load();

First we define the “url” where we’re going to search for the XML using Ajax, in the second configuration parameter we assigned the “reader” to the “Store”.

Once created the store we can use the method “load” to make the “Ajax” request and receive the information.

So far we have only defined the data source by making the necessary configurations. If you still have doubts about the “Store”, I recommend you to read the tutorial where we talked specifically about this component.

Creating the Grid

Once we have the information ready to display it in the table, we can start creating the grid as follows:

var grid = new Ext.grid.GridPanel({
	store: store, //assigning the data source
	columns: [ //creating the columns
		new Ext.grid.RowNumberer(), //numbering the rows
		{header:'Name', dataIndex:'name',sortable: true},
		{header:'Company', dataIndex:'company',sortable: true},
		{header:'Position', dataIndex:'position',width:230,sortable: true},
		{header:'Age', dataIndex:'age', width:40,sortable: true}
	],
	border: false, //removing the bordering
	stripeRows: true //assigning the stripes to the rows
});

With this simple configuration we created a very basic but attractive table, we have studied the code in the previous tutorial, but I will review the properties used in this grid:

“store”: This property defines the data source used in the grid.
“columns”: we define the columns that the grid will have, this part is really important because we link the columns with the information that is going to be displayed (dataIndex).
“border”: This property is inherited from the component Panel and by assigning the value “false” we remove the border, we do this because we put the grid in a window.
“stripeRows”: By assigning the value “true” we stripe the rows this will make it easy to see the information, by default is “false”.

Creating the window

Finally, let’s put the grid inside of a window:

var win = new Ext.Window({
	title: 'Grid example',
	layout: 'fit', // <---
	width: 510,
	height:350,
	items: grid
});

win.show();

The only important thing in this setting and we probably do not know (if we have taken this course from the beginning) is the setup "layout" to whom we are assigning the value "fit", this value will display the table occupying one hundred percent of the window, otherwise the grid will not be displayed completely, but I will talk about the layouts in the future tutorials.

Conclusions

We have seen how easy it is to display information from a XML into a grid, we also appreciated the engineering implement on the Ext JS library, because the creation of the grid is the same for the different formats (XML, JSON, Array), the only thing we changed was the "Store" and the grid works the same, this is an advantage in terms of the maintenance of systems is concerned.

If you have any questions or suggestions feel free to leave a comment in this post, also don't forget to subscribe to our feeds or follow us on Twitter (@quizzpot) to be updated.