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.

Final example

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.

If all went well, you should see this screen

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.

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.

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.

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.

Resources

To continue this tutorial you must download the resources, which contains an HTML that includes a JS file in which I have created a form contained in a window and a PHP file which will process the information sent.

Demonstration

I created a demonstration of the exercise we’re going to do, I recommend you go to test its functionality, is very simple but it explains perfectly what we’ll learn today.

Final result

Traditional Submit

If we want to do an ordinary “submit”, without using Ajax and reload the whole page, we only need to set the property “standardSubmit: true”, by default is false.

If we open the file “submitform.js” of the resources, you will see the following code in the method “init”:

this.form = new Ext.form.FormPanel({
	standardSubmit: true, // traditional submit
	url: 'submitform.php',
	border:false,
	labelWidth: 80,
	defaults: {
		xtype:'textfield',
		width: 150
	},
	items:[
		{fieldLabel:'Title',name:'title', allowBlank:false},
		{xtype:'combo',fieldLabel:'Year',name:'year',triggerAction:'all',store:[2009,2008,2007,2006]},
		{xtype:'numberfield',fieldLabel:'Revenues',name:'revenues'},
		{xtype:'textarea',fieldLabel:'Comment',name:'comment'},
		{xtype:'checkbox',fieldLabel:'',labelSeparator:'',boxLabel:'Available',name:'available'}
	]
});

this.win = new Ext.Window({
	id:'mywin',
	title: 'Submit data to the Server',
	bodyStyle: 'padding:10px;background-color:#fff;',
	width:300,
	height:270,
	items:[this.form],
	buttons: [{text:'Save'},{text:'Cancel'}]
});

this.win.show();

We have studied the previous code several times, so I assume that you understand it perfectly. If you’ve noticed, the first setting is “standardSubmit: true” and it enable us to a traditional “submit”, this is actually the only difference of the forms we’ve created in previous tutorials.

make a submit with the buttons save

Until now the buttons do absolutely nothing, they are just being displayed in the form so what we have to do is assign them a “handler” and in this case assign the “scope” we are going to use. Let’s change the code of the button like this:

{text:'Save',handler:this.sendData,scope:this}

Now we have to implement the function “sendData” to do the “submit”.

sendData: function(){
	//submit the form
	this.form.getForm().submit();
}

If you’ve noticed we used the method “getForm()” to have access to the BasicForm in order to do the “submit()”. The component “FormPanel” contains another component called “BasicForm” which is responsible for managing the basic functionalities of a form like: information of the fields, send information to the server, reset the fields, validations, etc.. At the same time, the “FormPanel” is a container that is responsible for managing the “layout”, assign a title and display it in the form of a “Panel” or allocate to other components.

Traditional submit, without Ajax

If at this time we click on the button “save”, we will see how the page is reloaded completely.

Make a submit using Ajax

I think this is the part that we’re all interested, let’s see how we can send information using Ajax. The first thing we need to do is remove the configuration “standardSubmit: true” of the form.

this.form = new Ext.form.FormPanel({
	//standardSubmit: true, // remove this property
	url: 'submitform.php',
	border:false,
	labelWidth: 80,
	defaults: {
		xtype:'textfield',
		width: 150
	},
	items:[
		{fieldLabel:'Title',name:'title', allowBlank:false},
		{xtype:'combo',fieldLabel:'Year',name:'year',triggerAction:'all',store:[2009,2008,2007,2006]},
		{xtype:'numberfield',fieldLabel:'Revenues',name:'revenues'},
		{xtype:'textarea',fieldLabel:'Comment',name:'comment'},
		{xtype:'checkbox',fieldLabel:'',labelSeparator:'',boxLabel:'Available',name:'available'}
	]
});

These changes are enough to achieve our goal, if we test the example in this moment we can see in the Firebug console that the parameters are being sent correctly using the method “POST”.

Form submit using Ajax

Customize the request method

Sometimes is necessary to change the request method (by default POST) for a different one, in this case we must specify that method we need (GET, POST, PUT, DELETE), we will also send a message if the information was saved successfully or if something caused an error.

this.form.getForm().submit({
	method: 'put',
	success: function(form,action){
		Ext.Msg.alert('Success',action.result.msg);
	},
	failure: function(form,action){
		switch (action.failureType) {
			  case Ext.form.Action.CLIENT_INVALID:
				 Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
				 break;
			  case Ext.form.Action.CONNECT_FAILURE:
				 Ext.Msg.alert('Failure', 'Ajax communication failed');
				 break;
			  case Ext.form.Action.SERVER_INVALID:
				Ext.Msg.alert('Failure', action.result.msg);
				break;
			  default:
				Ext.Msg.alert('Failure',action.result.msg);
		  }
	}
});

In this example we used the method “PUT” to create a new record in the database, you must be wondering why I used PUT and not POST, right? In future tutorials I will talk about a technique called “REST” which specifies that we must use different existent methods to interact with the server as well as identify the “status” codes in the responses.

The property “success” enables us to configure the function that will be executed if everything went as expected, in this case we’ll only send a message of success:

Information saved successfully

The property “failure” allow us to configure a function we want to execute when an error was caused in the server.

Something went wrong when saving the information

Who decides when the methods are executed? Great question! Right now the component “FormPanel” expects that the server’s response contains the property “success”, this property is the one that decides which method will be executed, if the property is “true” the function configure in “success” is executed and if it is “false” the function set on property “failure” is executed.

{
    "success":true,
    "msg":"Message example"
}

Also the function configured in “failure” is executed when you cannot establish a communication with the server or an error was caused in the form validation.

Extra parameters

Sometimes it is necessary to send extra parameters to the server, to do this we only need to configure the property “params” in the options of the submit.

this.form.getForm().submit({
	method: 'put',
	params: {
		extraParam: 'Extra params!',
		param2: 'Param 2'
		},
	success: function(form,action){
		Ext.Msg.alert('Success',action.result.msg);
	},
	failure: function(form,action){
		switch (action.failureType) {
			  case Ext.form.Action.CLIENT_INVALID:
				 Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
				 break;
			  case Ext.form.Action.CONNECT_FAILURE:
				 Ext.Msg.alert('Failure', 'Ajax communication failed');
				 break;
			  case Ext.form.Action.SERVER_INVALID:
				Ext.Msg.alert('Failure', action.result.msg);
				break;
			  default:
				Ext.Msg.alert('Failure',action.result.msg);
		  }
	}
});

Message loading

Finally I will show you how we can mask the window and display a message telling the user that the information is being sent.

First, we need to create the mask and show it before we do the submit.

var mask = new Ext.LoadMask(Ext.get('mywin'), {msg:'Saving. Please wait...'});
mask.show();

The component “Ext.LoadMask” creates a mask for a given element, in this case we are assigning the window that contains the form, the second parameter is a configuration object where we are assigning a message to show; once the “instance” is create we will show the mask using the method “show”.

Mask showing the message to the user

Now we must hide it when the server responds, this means that we must invoke the method “hide” in the “success” and “failure”.

success: function(form,action){
		mask.hide(); //hide the mask
		Ext.Msg.alert('Success',action.result.msg);
}

Conclusions

In today’s tutorial we learned some important things, you can see that making a submit is very easy and is completely configurable and can be adapted to our needs.

If you have any questions about this tutorial you can leave a comment or contact us, we will gladly answer your questions. Don’t forget that you can subscribe to our Feeds or read the tutorials by email and of course you can follow us on Twitter (@quizzpot) to be updated.

Resources

Before we start this tutorial, please download the resources, which consists of three files and a folder containing images, you must copy these files to the Web server we have been working on, this is very important so we can use Ajax.

Demo

In today’s exercise we will dynamically generate the “Top Ten” list of the most popular movies, when we click on any of these images a form will be displayed, which will be loaded by making a request to the server via Ajax. You can see a demonstration of what we’ll have when we finish this tutorial.

Final Example

Information

The most important thing in an application is the information, this time the information is contained in an array on the server, but remember that the information can come from a database such as MySQL, PostgreSQL, Oracle, a Web Service or any other place.

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

	$all = isset($_GET['all']);
	$movie = isset($_POST['id'])?$_POST['id']:rand(0,9);

	$data = array(
			array('title'=>'G-Force','year'=>2009,'revenues'=>32.2,'comment'=>'Very good movie, it is an awesome movie','available'=>true,'img'=>'images/gforce.jpg'),
			array('title'=>'Harry Potter and the Half-Blood Prince','year'=>2009,'revenues'=>30,'comment'=>'Not to good, but it is ok','available'=>true,'img'=>'images/hpotter.jpg'),
			array('title'=>'The Ugly Truth','year'=>2009,'revenues'=>27,'comment'=>'Another comment to the movie','available'=>false,'img'=>'images/ugly.jpg'),
			array('title'=>'Orphan','year'=>2009,'revenues'=>12.8,'comment'=>'Testing the comment','available'=>'images/orphan.jpg','img'=>'images/orphan.jpg'),
			array('title'=>'Ice Age: Dawn of the Dinosaurs ','year'=>2009,'revenues'=>8.2,'comment'=>'Awesome movie, really good','available'=>true,'img'=>'images/ice.jpg'),
			array('title'=>'Transformers: Revenge of the Fallen','year'=>2009,'revenues'=>8,'comment'=>'Another test','available'=>false,'img'=>'images/transformers.jpg'),
			array('title'=>'The Hangover','year'=>2009,'revenues'=>6.46,'comment'=>'Testing','available'=>true,'img'=>'images/hangover.jpg'),
			array('title'=>'The Proposal','year'=>2009,'revenues'=>6.42,'comment'=>'Comment','available'=>true,'img'=>'images/proposal.jpg'),
			array('title'=>'Public Enemies','year'=>2009,'revenues'=>4.17,'comment'=>'One more comment','available'=>false,'img'=>'images/public.jpg'),
			array('title'=>'Brüno','year'=>2009,'revenues'=>2.72,'comment'=>'nothing to say','available'=>false,'img'=>'images/bruno.jpg')

	);

	if($all){
		$info = $data;
	}else{
		$info = array(
			'success'=>true,
			'data'=> $data[$movie]
		);
	}

	echo json_encode($info);
?>

The most important thing I’d like to mention from the previous code is the parameter “all”, if this parameter is sent in the request, the entire array of objects will be printed in format “json”, if it’s not present it means that we’re requesting only one item.

Requesting information from the server

If you run the HTML in your browser right now you will only see the title, we need to request the information we’re going to display with Ajax, within the method “init” of the main object we will make the request like this:

Ext.Ajax.request({
	url: 'loadform.php',
	params: {all:true}, //requesting all the records
	method: 'GET', //using the method GET
	scope: this,
	success: this.createTopTen // and indicationg what function will process the response
});

As we have requested all the records we will get the following result:

[{"title":"G-Force","year":2009,"revenues":32.2,"comment":"Very good movie, it is an awesome movie","available":true,"img":"images\/gforce.jpg"},{"title":"Harry Potter and the Half-Blood Prince","year":2009,"revenues":30,"comment":"Not to good, but it is ok","available":true,"img":"images\/hpotter.jpg"},{"title":"The Ugly Truth","year":2009,"revenues":27,"comment":"Another comment to the movie","available":false,"img":"images\/ugly.jpg"},{"title":"Orphan","year":2009,"revenues":12.8,"comment":"Testing the comment","available":"images\/orphan.jpg","img":"images\/orphan.jpg"},{"title":"Ice Age: Dawn of the Dinosaurs ","year":2009,"revenues":8.2,"comment":"Awesome movie, really good","available":true,"img":"images\/ice.jpg"},{"title":"Transformers: Revenge of the Fallen","year":2009,"revenues":8,"comment":"Another test","available":false,"img":"images\/transformers.jpg"},{"title":"The Hangover","year":2009,"revenues":6.46,"comment":"Testing","available":true,"img":"images\/hangover.jpg"},{"title":"The Proposal","year":2009,"revenues":6.42,"comment":"Comment","available":true,"img":"images\/proposal.jpg"},{"title":"Public Enemies","year":2009,"revenues":4.17,"comment":"One more comment","available":false,"img":"images\/public.jpg"},{"title":"Br\u00fcno","year":2009,"revenues":2.72,"comment":"nothing to say","available":false,"img":"images\/bruno.jpg"}]

Creating the “Top Ten” List

With the information we received we can create the “Top Ten” list, we will implement the function “createTopTen” where we will decode the JSON first so we can use it correctly and then with the class “DomHelper” we will generate and insert nodes to the DOM.

var info = Ext.decode(response.responseText); //decoding the text we received
Ext.each(info,function(movie){ //iterating the information
	Ext.DomHelper.append('content',{ //and creating an image for each element
		tag:'img',
		src:movie.img,
		alt:movie.title,
		title:movie.title,
		cls: 'movie'
	});
},this);

We have previously studied the class Ext.DomHelper, therefore we must be familiar with its functionality, if you can’t remember about this component I recommend you to review the tutorial where we studied this component.

Creating the images for the Top Ten list

Adding “listeners” to the images

The next thing we need to do is add a “listener” to the event “click” of each image we created, so we can display the form with the appropriate information.

Right after we create the images, we’re going to select the DOM nodes, iterate them and we will add the listener to each image.

var items = Ext.DomQuery.select('div[id=content] > img');
Ext.each(items,function(el,i){
	el = Ext.get(el);
	el.on('click',function(){
		this.showDetail(i); //this function will be triggered when the user clicks on an image
	},this);
},this);

In the previous code we can see that the function “showDetail (i);” will be triggered when we click on any image, it is important to mention that you are receiving a parameter “i” which indicates the “id” of the image that has been clicked, this will be useful to request the information to the server.

Creating the form

It’s time to create the form within the “showDetail” function as follows:

var form = new Ext.form.FormPanel({
	url: 'loadform.php', //the URL we  need to load the form
	border:false,
	labelWidth: 80,
	defaults: {
		xtype:'textfield',
		width: 150
	},
	items:[
		{fieldLabel:'Title',name:'title'},
		{xtype:'combo',fieldLabel:'Year',name:'year',triggerAction:'all',store:[2009,2008,2007,2006]},
		{xtype:'numberfield',fieldLabel:'Revenues',name:'revenues'},
		{xtype:'textarea',fieldLabel:'Comment',name:'comment'},
		{xtype:'checkbox',fieldLabel:'',labelSeparator:'',boxLabel:'Available',name:'available'}
	]
});

At this time of course we must be completely familiar with the code above, the only difference is the property “url”, in this property we configure the URL to make the Ajax request to load the form, don’t forget that it’s very important to use the property “name” in the form fields.

The next thing we need to do is create the window that will contain the previous form.

var win = new Ext.Window({
	title: 'Loading data into a form',
	bodyStyle: 'padding:10px;background-color:#fff;',
	width:300,
	height:270,
	items:[form],
	buttons: [{text:'Save'},{text:'Cancel'}]
});

win.show();

If you click on any image at this moment you will see something like the following picture.

Empty form

Requesting the information from the server

We have created the form and appears when clicking on each image, the next thing we will do is fill it with the information depending on the requested image, this is very easy to do because we simply need to invoke the method “load” with the corresponding parameters:

form.getForm().load({params:{id:id}});

We must remember that the JSON format that the server must return is:

{
	"success":true,
	"data":{"title":"The Proposal","year":2009,"revenues":6.42,"comment":"Comment","available":true,"img":"images\/proposal.jpg"}
}

It is very important to return the parameter “success” to “true” (if there wasn’t any error) in order to properly fill out the form, otherwise the component assumes that there was an error in the server and the form won’t get filled.

Form loaded with Ajax

Conclusions

Today we learned how to fill out the form using Ajax calls to the server, it is very important that the response contains the property “success: true” so it will work correctly; from my point of view I don’t like that the component requires us to accomplish this, I think it would be better to use a HTTP status to detect whether an error has happened, so we could develop our applications using “REST” (I’ll talk about it in future tutorials) however, the Forms are awesome.

As always, if you have any questions or suggestions please leave a comment and don’t forget to follow us on Twitter (@quizzpot) to be updated on new tutorials or you can subscribe to our Feeds.

Before you start this tutorial you need to download the resources. Just remember that this tutorial belongs to the chapter of Forms and at end of the chapter we will add the DateField to our final form, but to avoid confusions, let’s do this tutorial in a separate file.

You can see the demo of what we’ll do in this tutorial, the following images show the component we will see today.

The component DateField

Packaging the tutorial.

Let’s package our code before we start.

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

Ext.BLANK_IMAGE_URL = '../ext-3.0/resources/images/default/s.gif';

com.quizzpot.tutorial.DateFieldTutorial = {
	init: function(){
		//the code goes here
        }
}
Ext.onReady(com.quizzpot.tutorial.DateFieldTutorial.init,com.quizzpot.tutorial.DateFieldTutorial);

By now you all must know what the previous code is doing, otherwise I recommend you read the tutorial that has a better explanation.

Window

Right now we’re going to create a window that will contain different types of settings for the DateField component we will create, this window will help us to visualize the DateFields we will use in this tutorial.

var win=new Ext.Window({
	title: 'DateField demo',
	bodyStyle:'padding: 10px',//adding padding to the components
	width:400,
	height:360,
	layout:'form'		//organization of the components
});
win.show();

We have explained the configuration properties in the chapter of windows and panels, if you have doubts regarding the previous code you can review the chapter. About the configuration “layout”, I won’t explain in details about it since we’ll discuss about it later on, for now just keep in mind that assigning the value “form”, the fields will be organized in the window just like form.

The window that will contain the date fields

Simple DateField

Once created our window, we will create our first DateField component.

 var dateField = new Ext.form.DateField({
	fieldLabel: 'Date',
	emptyText:'Insert a date...',
	format:'Y-m-d',
	width: 150
});

In the previous code we use three properties, let’s see a description of them:

format: this property defines the date format to display in our field. The format ‘Y-m-d’, defines a format like “year-month-day”. If you want to see more formats you can check the API of the Date object.

fieldLabel: this is the common property for all components, this property sets the text that will appear next to the component; through this property we’ll show the user to type of information he/she needs to enter in the field, so make sure you write a descriptive text.

emptyText: we have seen this property previously, it’s the default text to place into an empty field, it is very useful to display a hint to the user.

Let’s add the component to our window:

var win=new Ext.Window({
	bodyStyle:'padding: 10px',
	width:400,
	height:360,
	items: dateField, //<-- assigning the datefield
	layout:'form'
});
win.show();

A basic DateField

A restricted DateField

What happens if we want to show that our dates are restricted? For example if we want the user to select days from today. For this type of configuration there are some properties we need to add to our DateField.

var dateFieldR=new Ext.form.DateField({
	fieldLabel: 'Date from today',
	emptyText:'Insert a date...',
	format:'Y-m-d',
	minValue: new Date(), //<-- min date is today
	maxValue:'2010-08-28', // <-- max date
	value:new Date() // <-- a default value
});

Description of the properties:

minValue: is the the minimum value allowed in our component DateField.

maxValue: is the the maximum value allowed in our component DateField.

value: the value to initialize the field with (defaults to undefined).

As you can see in this example, in the property “maxValue” I’ve put a date directly, I did it only to show that we can also assign a date using a String and the component will make the necessary data conversions.

A restricted DateField

Conclusions

The DateField component is a fairly complete component and the configuration options it gives us are mostly the same as the TextField component with variations specific to the component, this is because DateField inherits from TextField.

This tutorial was short but to see the different configurations we can have a better understanding of the functionality of the DateField component. In the next tutorial we will discuss two nice components: the textareas and HTML editors.

As always, your comments and suggestions are very welcome, just remember to follow us on Twitter (@quizzpot) to be updated.

Before you start this tutorial, you need to download the resources. Remember that this tutorial is part of the chapter Form, and end of the tutorial we will add our ComboBox to the form we created in the previous tutorial, but to avoid some confusion we’ll do this tutorial in a separate file.

Packaging the tutorial.

Let’s package our code before we start.

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

Ext.BLANK_IMAGE_URL = '../ext-3.0/resources/images/default/s.gif';

com.quizzpot.tutorial. ComboBoxTutorial= {
	init: function(){
		//code for the tutorial goes here
       }
}
Ext.onReady(com.quizzpot.tutorial. ComboBoxTutorial.init,com.quizzpot.tutorial. ComboBoxTutorial);

Window

At this moment we’re going to create a window that will contain different types of ComboBox. This window will display the different ComboBoxes we will create in this tutorial.

var win=new Ext.Window({
	title: 'ComboBox example',
	bodyStyle:'padding: 10px',		//adding padding to the components
	width:400,
	height:360,
	layout:'form'			//organization of the components
});
win.show();

We can highlight the property “layout:’form’” from the code above, because for a window the layout by default is “auto“, so we needed to overwrite the property to display the components distributed as a form.

Window that will contain the ComboBox

Local ComboBox

After creating the window, let’s create our ComboBoxes; the first thing we need is the data that will be loaded into our ComboBox, the simplest way to load data into our ComboBox is using an array.

var data=['Code Igniter','Cake Php','Symfony','Zend'];

var comboLocal =new Ext.form.ComboBox({
	fieldLabel:'Frameworks PHP',
	name:'cmb-data',
	forceSelection:true,
	store:data,
	emptyText:'Select a framework...',
	triggerAction: 'all',
	//hideTrigger:true,
	editable:false,
	//minChars:3
});

The above code creates a ComboBox with data naming some existing PHP Frameworks. Let’s see the meaning of the properties that we can use to configure our ComboBox:

forceSelection: This option forces the user to select a value from the combo, this is independent of the type of validation allowBlank, which we will discuss in the next tutorial.
store: is the data source that our combo will show, we’ve talked about this component previously.
emptyText: this is the text displayed when we haven’t selected anything in our combo.
triggerAction: this option indicates the action to execute when the trigger is clicked.
editable: the combo can not be edited, which means you can not write any value on it.
hideTrigger: setting this property to true we make the combo to be displayed without the small down arrow icon (“trigger”).
minChars: it tells us how many characters we must write before the combo starts to display information, in our case we must comment the editable property and not comment the property minChars to see its functionality.

Let’s add the ComboBox to our window:

var win=new Ext.Window({
	bodyStyle:'padding: 10px',//adding padding to the components
	width:400,
	height:360,
	items: comboLocal, //adding the combo to the window
	layout:'form'		//organization of the components
});
win.show();

A Combo loaded with local information

Remote ComboBox

Now let’s create a combo that we will load with data remotely using Ajax. On this occasion we will use PHP, but as we know we can use any server language.

In the remote ComboBox we will use for our source of data a JSON type store, I won’t explain this component because we already talked about it in previous tutorials.

The JS code will go like this:

//se crea el store
var store= new Ext.data.JsonStore({
		url:'combo.php',
		root: 'data',
		totalProperty: 'num',
		fields: [
			{name:'name', type: 'string'},
			{name:'desc', type: 'string'},
			{name:'logo', type: 'string'},
		]
});

//creating the combo and assigning the store
var comboRemote=new Ext.form.ComboBox({
	fieldLabel:'Data Base',
	name:'cmb-DBs',
	forceSelection: true,
	store: store, //assigning the store
	emptyText:'pick one DB...',
	triggerAction: 'all',
	editable:false,
	displayField:'name',
        valueField: 'name'
});

As you can see in the properties of our combo we added the property displayField, with this property we tell the ComboBox the information to display, in this case is going to show only the data ‘name’ and using the property “valueField” we specify which field the store is going to use as a “value”, it can be a numeric ID but in this case we use the name.

Finally we need to add the combo we just created to the window, as follows:

var win=new Ext.Window({
	title: 'ComboBox example',
	bodyStyle:'padding: 10px',		//adding padding to the components
	width:400,
	height:360,
	items: [comboLocal,comboRemote],//adding the remote combo
	layout:'form'					//organization of the components
});
win.show();

A ComboBox loaded remotely using Ajax

With PHP code we’re going to present the information to display the combo, this information can come from a database or a Web Service, to make things simple and understandable the information is “hardcoded” in arrays.

<?php
	$dataDB = array(
				array(
					"name"=>"MySQL",
					"desc"=>"The world's most popular open source database",
					"logo"=>"mysql.png"
				),
				array(
					"name"=>"PostgreSQL",
					"desc"=>"The world's advanced open source database",
					"logo"=>"postgresql.png"
				),
				array(
					"name"=>"Oracle",
					"desc"=>"The world's largest enterprise software company",
					"logo"=>"oracle.png"
				),
	);

	$o = array(
			"num"=>count($dataDB),
			"data"=>$dataDB
		);
	echo json_encode($o);
?>

As you can see, we have defined the fields the JsonStore accepts, also with the function json_decode we are generating the JSON from a PHP array.

Formatted Data

Okay now let’s give a format to our information, we will use the information from our remote combo, so let’s get started. Let’s create a new ComboBox that will be loaded with the same data that the PHP code provides, using the same store as the previous combo.

To format our ComboBox we need a template, so we’re going to assign the template to our new combo by using one of its properties ( “tpl” of “template”). The template is written in HTML with some CSS so the information is display in detail.

var comboRemoteTpl = new Ext.form.ComboBox({
	fieldLabel:'Data Base',
	name:'cmb-Tpl',
	forceSelection:true,
	store:store,
	emptyText:'pick one DB...',
	triggerAction: 'all',
	mode:'remote',
	itemSelector: 'div.search-item',
	tpl: new Ext.XTemplate('<tpl for="."><div class="search-item" style="background-image:url({logo})"><div class="name">{name}</div><div class="desc">{desc}</div></div></tpl>'),
	displayField:'name'
});

The properties that appear now are:
tpl: assigns a template to display each data of the combo, the template created is a string of HTML and some CSS styles and classes; in future tutorials we will talk about more on the functionality of the object “Ext.XTemplate“, so for now is only worth mentioning that with a loop we go through all the records in the store and generate a list of options for the user.

itemSelector: this property tells us which property of the DOM is going to trigger the “select” event of our combo.

So far we have modified the HTML of the drop-down list of the combo, what we need to do now is set the styles needed like this:

	.search-item{
		border:1px solid #fff;
		padding:3px;
		background-position:right bottom;
		background-repeat:no-repeat;
	}
	.desc{
		padding-right:10px;
	}
	.name{
		font-size:16px !important;
		color:#000022;
	}

ComboBox customized with a template

A variation of the ComboBox

There’s a component that ExtJS that is a variation of the ComboBox, this component is called TimeField and is useful to display values dealing with time. The majority of the properties are the same as the ComboBox.

var timeField=new Ext.form.TimeField({
       	fieldLabel: 'Time Field',
       minValue: '4:00',
       maxValue: '23:59',
       increment: 15,
       format:'H:i',
       name:'cb-time'
});

A Combo with time

As we can see, we have created a new ComboBox that shows data in time format without any problems.
Let me explain some of its properties:
minValue: is the minimal value that will be shown in our field.
maxValue: is the maximum value that will be shown.
increment: the number of minutes between each time value in the list.
format: the format of the time we’re going to display.

Conclusions

Today we saw a very complete component called ComboBox, this component has many different types of configurations that make it a very used component in all kinds of applications with Ext JS.

To see more benefits of this component do not forget to check the ExtJS API Documentation.

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