Packaging the tutorial

Let’s package the code first, to avoid conflicts with other variables.

Ext.ns('com.quizzpot.tutorial');   
  
Ext.BLANK_IMAGE_URL = '../ext-3.0/resources/images/default/s.gif';   
  
com.quizzpot.tutorial.ArrayGridTutorial = {   
    init: function(){   
        //The code of the tutorial goes here
    }
}   

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

The Store

The next thing we need to do is define the data repository, which is where we will retrieve the data, in this case we are going to work with static data stored in a two-dimensional array like this:

//Two-dimensional array
var myData = [
	['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
	['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
	['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
	['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
	['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
	['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
	['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
	['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am']
];

Now, let’s define an “Ext.data.ArrayStore” that will be responsible for reading the data array, in order to do this we need to set the reference name of the data column and the type of data it contains.

//creating the data repository
var store = new Ext.data.ArrayStore({
	fields: [
	   {name: 'company'},
	   {name: 'price', type: 'float'},
	   {name: 'change', type: 'float'},
	   {name: 'pctChange', type: 'float'},
	   {name: 'updated', type: 'date', dateFormat: 'n/j h:ia'}
	]
});
store.loadData(myData);

The attribute “name” defines the name by which we will reference the first data column, the column called “price” is a reference to the second column and so on.

You can use the “type” attributes which defines the data type of the column, “dateFormat” defines the format of the columns that have a date format (see ExtJS API for more information).

The Grid

Now we are ready to create our grid by using the object “Ext.grid.GridPanel”:

//Creating the object Ext.grid.GridPanel
var grid = new Ext.grid.GridPanel({
	title:'Company List',
	store: store,
	renderTo: document.body,
	columns: [
		{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
		{header: "Price", width: 75, sortable: true, dataIndex: 'price'},
		{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
		{header: "% of change", width: 75, sortable: true, dataIndex: 'pctChange'},
		{header: "Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'updated'}
	],
	stripeRows: true,
	height:250,
	width:500        
});

The grids, as well as the forms and other components inherit from “Ext.Panel”, this has already been seen in previous tutorials so I guess you will be familiar with this.

The properties used are:
“title”: property inherited from the Ext.Panel class, it defines the title of the panel.
“store”: property that defines where the grid will get the data, (the Ext.data.ArrayStore defined previously).
“renderTo”: defines where the grid is going to be rendered, receives a reference of the id of a DOM object or DIV.
“columns”: defines the header of each column, in here the store date are associated through the property “name” defined in the store.
“id”: defines the id of the column.
“header”: defines the name displayed in the title of each column.
“width”: sets the width of the column.
“sortable”: boolean property that defines if we’re going to allow the ordering of the data by clicking the column heading.
“dataIndex”: in here we define the value of the property “name” of the store, by doing this we associate the data of the column of the store with the column of the table.
“renderer”: with this property we can customize the data as shown in the column, I’ll explain that later.
“stripeRows”: this property is used to show a slight shading spacing in the rows of the table.
“height”: defines the height of the grid.
“width”: define the width of the grid.

Image of a basic grid

As we can see the grids have well-defined components, for the data management we need to use a store whose type depends on the type of information we need to handle; for example we have the “Ext.data.JSONStore” that handles information in JSON format, I suggest you to check the API to see more properties and types of data repositories.

The ColumnModel

Even though our grid is now ready and there are some things we might need that thankfully ExtJS has, one of those things are “Ext.grid.ColumnModel” which can be use to display the columns in the table and link them with the columns of the store, at the same time they provide functionalities such as selection of rows using a checkbox or a column for the enumeration of the rows.

Basically, creating a columnModel is similar to the content we’ve added in the property “columns” of our table.

//Creating the object Ext.grid.ColumnModel
var myColumnModel = new Ext.grid.ColumnModel([
	{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
	{header: "Price", width: 75, sortable: true, dataIndex: 'price'},
	{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
	{header: "% of change", width: 75, sortable: true, dataIndex: 'pctChange'},
	{header: "Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'updated'}
]);
//our grid will  be changed to associated with the variable myColumnModel
var grid = new Ext.grid.GridPanel({
	title:'Company List',
	store: store,
	renderTo: document.body,
	cm: myColumnModel,//reference to columnModel
	stripeRows: true,
	height:250,
	width:500        
});

Now let’s number the rows and add a column of checkboxes for the selection.

//Creating the object Ext.grid.ColumnModel
var myColumnModel = new Ext.grid.ColumnModel([
  	new Ext.grid.RowNumberer(),
  	new Ext.grid.CheckboxSelectionModel(),
  	{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
  	...
]);

A grid with numeration on the rows and checkboxes to select them

The SelectionModel

We are almost done, the only thing to add is a “Ext.grid.SelectionModel” which will indicate the mode of selection that our grid will have.

//Creating a variable to link our object
var mySelectionModel = new Ext.grid.CheckboxSelectionModel({singleSelect: false});

//these are the settings we need for the grid
var grid = new Ext.grid.GridPanel({
	title:'Company List',
	store: store,
	renderTo: document.body,
	cm: myColumnModel, //reference of the columnModel
	sm: mySelectionModel, //reference of the selectionModel
	stripeRows: true,
	height:250,
	width:500        
});

Characteristics of a grid in Ext JS

Conclusions

Today we have created a simple grid that reads data from an Array using an “ArrayStore”, then we created the table and we associated the store columns with the property “columns” of the table or creating a “ColumnModel” and finally we added a “SelectionModel” to manage the way to select rows, soon we will learn how to use different types of store, use events in the store and the table and “selecionModel.

If you have any question or suggestion feel free to leave a comment in this post. Don’t forget to follow us on Twitter (@quizzpot) or add our feeds to your favorite RSS reader.

I’ll invite you to test the demo of what we’ll do in this tutorial.

Form with personalized validations

Resources

Before we start the tutorial don’t forget to download the resources, which only consist of two files: a HTML and JS; I have created a form and I put it inside of a window, so what you need to do is add the validations to some fields.

Display error messages

If you execute the resources at this moment you will see that three fields are required, and when you click on the button “save” you will see some errors in red (if you don’t write anything in the text boxes), but only around the fields.

No error messages

The user should receive enough information to know what is wrong and how to fix it, so what we need to do is show an error message, to do this we only need to write the following lines at the beginning of the method “init”:

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

The first line allows to display floating messages when we position the mouse over the text box, on the second line we display an error icon on the side of the field.

Displaying a floating message with the validation error

Validate the age of majority

In the “Date of birth” we’re going to calculate how many years we have from the given date of birth to today and validate that is over 18 years.

In the previous tutorial we saw how to use the “vtype’s” that are included in the ExtJS framework, today we’ll add more validations to the class “Ext.form.VTypes. The first thing we need to do is to extend the class like this:

Ext.apply(Ext.form.VTypes,{

	//in here we're going to define the validations

});

The next things we need to do is define the “vtype” like this:

Ext.apply(Ext.form.VTypes,{
	adult: function(val, field){
		try{
			var birth = field.getValue();
			var now = new Date();
			// The number of milliseconds in one year
			var ONE_YEAR = 1000 * 60 * 60 * 24 * 365;
		    	// Convert both dates to milliseconds
		    	var date1_ms = birth.getTime()
		    	var date2_ms = now.getTime()
		    	// Calculate the difference in milliseconds
		    	var difference_ms = Math.abs(date1_ms - date2_ms)
		    	// Convert back to years
		    	var years = difference_ms/ONE_YEAR;
			return years >= 18;
		}catch(e){
			return false;
		}
	},
	adultText: 'You are underage!', //error message
	adultMask: / /  //regexp to filter the characters allowed
});

First we defined the name that the “VType” will receive, in this case “adult”, then we assign a function that receives two parameters: the contents of the field and the instance of the field that’s being validated, within this function we will have the code to validate and it must return “true” when the captured value is correct or “false” when the value is incorrect.

The next thing we need to do is define the text to display if the captured information is incorrect, we must remember that we have more validations within this object (Ext.form.VTypes), therefore to link the message with the function we only need to add the word “Text” at the end of the function name, in this case “adultText.

Optionally we can define a filter to capture only the correct characters, in order to do that we need to define a mask with the appropriate regular expression.

adultMask: /[\d\/]/

The previous regular expression validates that the user can only enter digits and a slash, these characters are the only ones we need to enter a date in the format we have defined; please notice that the property is called “adultMask”, we only added at the end the word “Mask” to relate it with the validation we created previously.

Having defined the “vtype” we have to assign it to the field we need to validate, in this case the field “birth” of the form:

{xtype:'datefield',fieldLabel:'Date of birth',name:'birth',allowBlank:false,format:'d/m/Y',vtype:'adult'},

Validating a date of birth (validating age of majority)

Validate a phone number

Now we will validate the format of a phone number, first we need to define the validation rules.

• Must contain 10 digits, for example: 8192847135
• It can only accept parentheses, dashes, spaces and numbers,for example: (81) 92 847 135, 81 92-847-135, (81) 92-847-135, 81 92 84 71 35, 8192847135
• It should only contain characters defined previously.

With these rules we can now define the “vtype”:

phone: function(value,field){
	return value.replace(/[ \-\(\)]/g,'').length == 10;
},
phoneText: 'Wrong phone number, please make sure it contains 10 digits',
phoneMask: /[ \d\-\(\)]/

The function defined in the property “phone” only removes the accepted characters (such as spaces, dashes, parentheses) leaving only the numbers, then validates that are ten digits; the mask accepts only the characters defined in the rules.

Finally we need to assign the “vtype” to the form field that we need to validate.

{fieldLabel:'Phone number',name:'phone',vtype:'phone'},

Validating a phone number

Validate a credit card

In this last example we will validate the number of a credit card. First, we need to define the validation rules to have a clear idea of what we need to do.

• The number should have 16 digits, for example: 1234567891234567
• We can only accept digits, spaces and dashes, for example: 1234 5678 9123 4567, 1234-5678-9123-4567
• We should not accept any other character than the previous mentioned.

You can see that these rules are very similar to the phone, so we can do a copy / paste and modify the code to fit these requirements.

creditcard: function(value,field){
	return value.replace(/[ \-]/g,'').length == 16;
},
creditcardText: 'Wrong credit card number',
creditcardMask: /[ \d\-]/

I just made small changes because these rules are very similar, now we need to add the “vtype” to the field “credit”:

{fieldLabel:'Credit card',name:'credit',vtype:'creditcard'},

Validating a credit card

Conclusions

Today we learned how to create our own client-side validations, as you can see it was really easy. ExtJS provides us an easy way to create custom validations and even put a mask on our fields.

If you have any question or suggestion feel free to leave a comment on this post. Don’t forget to follow us on Twitter (@quizzpot) to be updated with the new tutorials we will post.

This is a complicated task, but with Ext JS we can do this process faster by using the validations the Framework provides us. In this tutorial we will validate common information but later I will show you how to do complex validations.

Resources

Let’s download the resources for this tutorial, I have created a form with common fields such as “name, date, e-mail, Website, comment”, also there’s a PHP file which returns randomly some validation errors that we will show in the forms.

Demo

For everyone’s benefit I’ve created a demo of what we will see at the end of the tutorial, so go ahead a try it.

Example of the tutorial finished

Required fields

If you run the application right now you will see that an empty form is displayed, if we click on the “Save” button a request to the server is made through Ajax, then we get a message of “success” or “error”. It is very common to have required fields in an application, we should make sure that these fields are entered by the user and are being sent to the server (through Ajax).

To define a field as required we only need to use the property “allowBlank: false” in the fields we want to make mandatory, we will modify the form as follows.

this.form = new Ext.form.FormPanel({
	url: 'simplevalidations.php',
	border:false,
	labelWidth: 80,
	defaults: {
		xtype:'textfield',
		width: 150
	},
	items:[
		{fieldLabel:'Name',name:'name',allowBlank:false}, //required field
		{xtype:'datefield',fieldLabel:'Start',name:'start',allowBlank:false}, //required field
		{xtype:'combo',fieldLabel:'Year',name:'year',triggerAction:'all',store:[2009,2008,2007,2006],readOnly:true},
		{fieldLabel:'Email',name:'email'},
		{fieldLabel:'Web site',name:'website'},
		{xtype:'textarea',fieldLabel:'Comment',name:'comment',allowBlank:false},//required field
		{xtype:'checkbox',fieldLabel:'',labelSeparator:'',boxLabel:'Available',name:'available'}
	]
});

In the previous code I’ve added the property “allowBlank: false” to the required fields, if you refresh the tutorial in your browser and click on the button “Save” you will get an error message and the required fields will be shown in red.

Required field in the form

Maximum of character in a TexField

Normally we define in the database the number of characters we want in a field, so it is recommended to make sure the user can only enter something less to that number, otherwise we will have problems when saving the information. To do this we need only set the property “maxLength” with the maximum number we need.

this.form = new Ext.form.FormPanel({
	//… code removed for simplicity
	items:[
		{fieldLabel:'Name',name:'name',allowBlank:false,maxLength:20},
		//… code removed for simplicity
	]
});

Now when we enter more than 20 characters in the field “name” an error appears telling us that something is wrong.

Restrict number of characters in a field

Common validations

Ext JS has a component that contains some common validations and we can add the validations we need, in this tutorial we will use the default ones.

The component responsible of saving these validations is the “Ext.form.VTypes” and has four default validations:

Only alpha characters

The alpha characters are all letters and the underscore, it does not include numbers or other symbols. Let’s assign a “VType” to the field “name” to accept only these characters.

this.form = new Ext.form.FormPanel({
	//… code removed for simplicity
	items:[
		{fieldLabel:'Name',name:'name',allowBlank:false,maxLength:20,vtype:'alpha'},
		//… code removed for simplicity
	]
});

With the property “VType” we can configure the validation we need, in this case we used “alpha” which is defined within the component “Ext.form.VTypes”, so don’t forget that.

Only alpha characters

Validate an e-mail

A common validation is the e-mail, let’s assign the “VType” that corresponds to the field of email in our form as follows:

this.form = new Ext.form.FormPanel({
	//… code removed for simplicity
	items:[
		//… code removed for simplicity

		{fieldLabel:'Email',name:'email',vtype:'email'}, // validating an e-mail

//… code removed for simplicity
	]
});

Thanks to Ext JS we don’t have to spend more than a minute to add that validation, now the form will look similar to the following screen when you enter a invalid e-mail.

Validation of an e-mail

Validate an URL

Let’s see how to validate a Website address or “URL”.

this.form = new Ext.form.FormPanel({
	//… code removed for simplicity
	items:[
		//… code removed for simplicity

		{fieldLabel:'Web site',name:'website',vtype:'url'}, //validating an URL

//… code removed for simplicity
	]
});

I’d like to emphasize that it also validates protocols such as “https” and “ftp”.

Validation of an URL

Validation in the server

So far we have seen how to validate on the client side, but it is also important to validate on the server side, let’s see how we can display the validation errors that are caused on the server.

Ext JS has a feature that will save us a lot of time when we need to display the errors caused in the server, this feature will emphasize the exact area where and why the error was caused. To use this feature the server response should have the following format:

{
	success: false,
	msg: 'General message of the error',
	errors: {
		field: 'Message of the reason of the error',
		anotherFieldError: 'what caused the error?'
       }
}

After defining the error messages, we need to edit the file “simplevalidations.php” and generate some test failures.

$info = array(
	'success' => false,
	'msg' => 'There was an error saving the record',
	'errors' => array(
		'name' => $name.' is not an employee of this corporation',
		'email' => 'E-mail does not exist in the database',
		'comment' => 'The comment is to short'
	)
);

These fields are enough to accomplish the functionality we want, so just go ahead a refresh your browser and you will see something similar to the following image:

Displaying validations errors caused in the server side

With this we can see that although the client validations are correct, the information may be incorrect due to our business logic, in this example the name of the person should exist in our catalog of employees (hypothetical example).

Conclusions

The validations are very important, today we saw how to use the default validations and we learned how to display error messages that are generated on the server. As you can see it was very easy validating fields with Ext JS.

If you have any questions or suggestions feel free to leave a comment on this post and don’t forget to follow us on Twitter (@quizzpot) to be updated.

Tutorial’s demo

Resources

Before I start explaning this tutorial you need to download the resources and copy the content into a Web server because we will be using Ajax to load information.

The information source

Let’s write the code needed to generate the information the combos will display, for this example the information is in PHP arrays, but remember that you can retrieve it from a database, Web Service, a text file or elsewhere.

 
$countries = array('Argentina','España','México','Perú','United States'); //step 1

$states = array( 			//step 2
	array('Buenos Aires','Córdoba','La Pampa','Mendoza','Santa Fe'),
	array('Asturias','Valencia','Barcelona','Toledo'),
	array('Distrito Federal','Nuevo León','Jalisco'),
	array('Arequipa','Puno','Tacna','Lima'),
	array('Texas','California','New york','Virginia')
);

In step one I have been defined the countries we will use in the first combo, these are five countries but the array can be bigger or smaller.

In step two I have defined the states of each country, it is important to mention that the connection is being made by the position in the arrays, let’s write the following code to linked both combos:

$id = isset($_POST['id'])?$_POST['id']:-1;	//step 1
	
if($id > -1){					//step 2
	//show states
	echo toJSON($states[$id]);		//step 3
}else{
	//show contries
	echo toJSON($countries);		//step 4
}

In step one we retrieve the parameter “id” and verify the existence, if it hasn’t been sent we assign the value “-1″ to the variable.

In step two we verify that the “id” is greater than “-1″, this tells us that our application is requesting the states of a country, the variable “id” must have the position of the requested country so in this part we decide what is going to be displayed: countries or states.

Step three is executed if the variable “id” contains the index of the selected country, so we can display the states of the requested index.

Step four is only implemented if the “id” is less than or equal to -1, this tells us that the application has requested the countries.

You probably noticed that we’re invoking the function “toJSON”, so let’s go ahead an write the function like this:

function toJSON($array){
	$data=array(); $i=0;			//step 1
	$total = count($array);
	foreach($array as $key=>$value){	//step 2
		array_push($data,array(
			'value'=>$i++,		//step 3
			'label'=>$value
		));
	}
	
	return json_encode(array(		//step 4
		'total'=>$total,
		'data'=>$data
	));
}

The purpose of this function is to create the JSON we’re going to send to the combos.

In step one we created two variables: “data” and “i”, in the variable “data” we will store each country or state we will display in the combos, the variable “i” is very important because we will use it to create the connection between the combos, I will explain this in step three.

In step two, we create a loop that runs through the array we received as a parameter, this array contains the information we’re going to display in the combos.

In step three we are storing each element of the array in the variable “data”, you can see that we are creating an array with two properties “value” and “label”, these properties will be used by the combo, in the property “value” we assigned the value of “i”, this is the value sent as a parameter to request the states of the country selected in the first combo, the property “label” is only the text that will display each option in the combo.

In step four we return the information we collected previously in JSON format.

Creating JsonStores

Once we have defined the information we need to display we can create the combos, we already know that the combos use a Store to manipulate the information displayed. There is a JS file (linked-cmb.js) in the resources you downloaded at the beginning of this tutorial, so let’s go ahead and edit it and within the function “getStore” you would write the following:

getStore: function(){
	var store = new Ext.data.JsonStore({
		url:'linked-cmb.php',
		root:'data',
		fields: ['value','label']
	});
	return store;
}

In here we only created a JsonStore, with the fields we defined on the server, the previous code should be easy to understand because we have used it on several occasions, but I’d like to mention that I have decided to create a function to generate a Store because I need two with the same properties, and I didn’t want to rewrite the same code twice, so I just created a function that generates the stores as many time as necessary.

Creating the Linked ComBoxes

In the previous step we created a function that generates one JsonStore, so let’s create two of these so we can use them with each of the combos:

this.countryStore = this.getStore();
this.stateStore = this.getStore();

The combo that will display the countries will have the following properties:

this.countryCmb = new Ext.form.ComboBox({
	store: this.countryStore,
	id: 'country',
	valueField: 'value',
	displayField: 'label',
	triggerAction: 'all',
	emptyText: 'Select a Country',
	fieldLabel: 'Country'
});

There’s nothing complicated in the previous code, is just a typical configuration of a ComboBox, the next thing we need to do is create a combo that will display the states of the selected country.

this.stateCmb = new Ext.form.ComboBox({
	store: this.stateStore,
	disabled: true,		//Step 1
	id: 'state',
	valueField: 'value',
	displayField: 'label',
	triggerAction: 'all',
	mode: 'local',		//Step 2
	emptyText: 'Select a Contry first',
	fieldLabel: 'State'
});

This configuration has some differences from the previous one, these differences are very important and I will explain you why:

In step one we are disabling the combo, in order to force the user to select the country first, this step is optional but improves the usability by ensuring that the user does not make mistakes.

Step two is very important, if we don’t assign this configuration we will have a strange behavior because by assigning the property “mode: ‘local’” we ensure that there is no Ajax requests to the server when the user clicks on the combo to see the options.

Displaying the combos in a window

So far we have written code but still can not see anything on the screen, so now it’s time to render the components, for this example I will use a window with the following properties:

this.window = new Ext.Window({
	title: 'Linked ComboBox',
	layout:'form',
	width:300,
	height:200,
	bodyStyle: 'padding:5px;background-color:#fff',
	items: [this.countryCmb,this.stateCmb]
});
this.window.show();

Creation of the ComboBoxes

Adding the “listener”

At this point we can see the combos, the combo of countries displays the information correctly but the combo of states is disabled and we can not do anything with it.

To interact with the components we need to add a “listener” to the first combo, in order to enable the combo of states when the first combo is selected and load the appropriate information.

this.countryCmb.on('select',function(cmb,record,index){	//step 1
	this.stateCmb.enable();			//step 2
	this.stateCmb.clearValue();		//step 3
	this.stateStore.load({			//step 4
		params:{
			id:record.get('value')	//step 5
		}	
	});
},this);

In step one we added a “listener” to the event “select”, this event is triggered when the user selects an option from the combo, the function receives three parameters: the combo, the record and the index that has been selected.

In step two we only enable the combo of states.

In step three we remove the value of the combo of states, if the user has previously selected a country and state and we load new sates, the old value will be removed.

En el paso tres limpiamos el valor del combo de estados, esto permitirá que si el usuario ha seleccionado anteriormente un estado, cuando se carguen nuevos estados se limpiará el valor anterior.

In step four we are reloading the information of the Store of states with Ajax.

In step five we pass the parameter “id” which is going to be used by the server to decided which states must be returned.

Linked combos

Conclusions

Following the steps in this tutorial we can create linked combos on the levels we need, we just need to assign a “listener” to the event “select” of the combo and within this “listener” reload the store of the combo.

Don’t forget to follow us on Twitter (@quizzpot) to be updated of the new tutorials we will be publishing and also if you have any questions or suggestions feel free to leave a comment on this post.

Features

• El usuario genera sus propias gráficas
• El estado de las gráficas son guardadas en la base de datos
• Las gráficas se pueden exportar a JPG
• La gráfica se puede imprimir
• Una gráfica se puede colapsar, expandir y mover en el área de trabajo

Imágenes

May you all enjoy these holidays with your family and friends, and have a very Happy Christmas and a new year of successes and challenges.