In this chapter we are going to build a couple of "tabs", so in order to do that we need to search the elements in the DOM and give them the required functionality and styles.

Resources

The resources for this chapter are a HTML document, a JavaScript file and a style sheet to layout the HTML content. What we are going to do in this chapter is search for DOM elements and apply them styles and events, after doing that we will build a couple tabs.

Ext.DomQuery

Ext JS use the object DomQuery to search elements in the DOM in a very simple way, this object provides different methods that return a collection of nodes that will either satisfy a query criteria or only the element we need to have selected by its identifier, also we can choose in which node the search should be made.

Step 1: Packaging the component

The first thing we need to do is create the object "Tabs" with its own "pacakge" to avoid overwriting any other component.

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

com.quizzpot.tutorial.Tabs = {
	init: function(){
		//The code of the tutorial goes here
}
}

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

The previous component has a function called "init" which is invoked as soon as the DOM is ready to be used.

Step 2: Setting the styles to the tabs

Right now the tabs don't have any style, they're only links so we need to add to them the CSS class we previously defined in the style sheet "domquery.css". We need to search for all the links that are in a list and belong to the menu, so we will use the method "select" of the object DomQuery, this method will return an array with the elements found.

var items = Ext.DomQuery.select('div[id=menu] > ul li a');

With the previous example we searched the links "a" that are inside of a "div" where the "id" is equals to "menu" and has immediately a list "ul" with a "li" element. Let's iterate the array with the next modifications:

Ext.each(items,function(item,i){
	item.id = item.innerHTML;
	Ext.fly(item).addClass('menu-item');
	Ext.fly('content'+item.id).setStyle('display','none');
});

The first thing you need to do is use the function "Ext.each", this function receives an array that will be iterated as first parameter and the function that will be executed for each element of the array as a second parameter, inside of the function an "id" will be assigned to the menu, this will help us to distinguish the tabs later on, after doing that we added a "css" class to the element (if you're not sure what is "Ext.fly" I recommend you to read the previous chapter), at last we will hide the content that the tab will display.

Step 3: Displaying the first tab

To display the first tab we have to show the content and select the corresponding tab.

Ext.fly('contentHome').setStyle('display','block');
		
var first = Ext.DomQuery.selectNode('#menu ul li a:last');
Ext.fly(first).addClass('item-selected');

The most important part of the previous code is where we searched for the selected tab, in this case we use the function "selectNode" from the object DomQuery to search the last element in the list "ul" that is found inside of the div "menu" (notice that I have used "#menu" instead of "div[id=menu"].

Step 4: Assigned the styles to the div

We will use the function "Element.setStyle" to assign the height of the div and apply a border.

Ext.fly('content').setStyle({
	'height':'300px',
	'border':'5px solid #000',
	'border-top':'none'
});

We have talked about the object Element in this course, but if you have any questions about the previous code we recommend you to read the corresponding chapter of this course.

Step 5: Create the event onClick

Let's iterate the array "items" that we previously created and assign the event click on each tab.

Ext.each(items,function(item){
	this.onClick(item);
},this);

The most important part of the previous code is the third argument of the function "Ext.each" because is the context where the function will be executed, the function is passed in the second parameter; it's very important to assign the correct context to invoke the method "this.onClick".

Step 6: Defining the click

It's necessary to create the method "onClick" inside of the object "Tabs", which will display the correct content whenever a tab is selected.

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

com.quizzpot.tutorial.Tabs = {
	init: function(){
		var items = Ext.DomQuery.select('div[id=menu] > ul li a');

		// … code removed for better understanding
		
		Ext.each(items,function(item){
			this.onClick(item); //invoking the method onClick
		},this); //assigning the correct context
	},
	
	onClick: function(el){
		// the code to show the tabs goes here
	}
}

The previous code shows the place where we will define the method click, the function will receive a DOM element. The first thing we need to do is create the event like this:

el.onclick = function(){
	return false;
}

With this instruction, each time you click on a tab the function will be executed, that's why this is the correct the place to write the actions that need to be done; the function returns "false" to stop the "href" of the link.

Paso 7: Selecting the correct tab

First we need to remove the class "item-selected" from the tab that is currently selected and assign the same class to the element where we have clicked.

var old = Ext.DomQuery.selectNode('#menu ul li a[class*=item-selected]');
Ext.fly(old).removeClass('item-selected');
Ext.fly(this).addClass('item-selected');

Paso 8: Displaying the selected content

Now that we know which tab was clicked we can show the correct content, but before we do that we need to hide the content that is being displayed right now.

var content = Ext.DomQuery.selectNode('#content > div{display=block}');
Ext.fly(content).setStyle('display','none');
Ext.fly('content'+this.id).setStyle('display','block');

The most important part of the previous code is the line where we make a search inside of the div "content", the content that has the style "display=block", in other words the content that is being displayed right now, after doing the search we need to hide the "old" content and show the new content.

Conclusions

In this chapter we have seen how we can use the class DomQuery to search elements inside of the DOM, using CSS properties, CSS classes, element's tags and element's attributes. We have created simple but functional tabs, I recommend you to do more examples with this class, because is very useful when we're developing our applications. As you can see, we could have done this example with jQuery if we only have chosen it as the adapter of the Framework, this means that we can choose what Framework.

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

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

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