The tabs are very useful to divide the information in sections or categories. It is very easy to do that with ExtJS, in this tutorial we will learn how to that.

Resources

Before you start this tutorial please download the resources, unzip them and copy the content inside of the folder "panels" that we created at the beginning of this chapter. In this tutorial we're going to create a window, inside of this window we're going to place the TabPanel with many tabs that we'll create dynamically during runtime, so I invite you to try out the demo I have prepared.

The TabPanel

A TabPanel is a container of tabs, there isn't a "Tab" component but we can add a "Ext.Panel" component, "Ext.grid.GridPanel" component, "Ext.tree.TreePanel" component or any other component that inherits from "Panel". What we need to do now is create the TabPanel like this:

//creating the first tab
var home = new Ext.Panel({
	title:'Home',
	iconCls: 'home-icon',
	html: 'This is the home page example'
});
		
this.tabs = new Ext.TabPanel({
	items: home //adding the first tab
});

In the previous code we created a panel that will be the "home" or main tab, after that we created the "TabPanel" and we only assigned the variable "home" to the Tabpanel to make the panel the first tab; until now we can't see anything on the screen and the reason is because we haven't render it, in order to show the panel we must use the property "renderTo" or the method "render" or in this case we can use a window that will contain the "TabPanel" like this:

var win = new Ext.Window({
	title:'Tabs example',
	width:600,
	height:500,
	bodyStyle: 'background-color:#fff;',
	items: this.tabs //assigning the tabpanel
});
win.show();

The previous code must look familiar to us because we have already studied it in previous tutorials. If you update the page where we're running this script you would see something like the following screenshot: Probably you have noticed that the tab "home" is not active until we click on it and the content is displayed; if we want the content to appear from the beginning we must use the property "activeTab" and assign the index of the tab we want to activate; so go ahead and code that like this:

this.tabs = new Ext.TabPanel({
	border: false,
	activeTab: 0, //<--activate the first tab
	items:[home]
});

It is important to remember that the indexes start on "0", therefor if we need to activate the first tab we must activate the tab with the index of "0".

Adding Tabs at runtime

At this moment we're going to add the other tabs dynamically, so in order to do that we must write the code inside of the "addTab" method, you can find this method in the object "TabPanelTutorial" that was already defined in the resources you've downloaded at the beginning of this tutorial; inside of the "addTab" method we're going to create a panel and add it to the "TabPanel" like this:

addTab: function(i){
	//the code to add a new tab goes here
	var tab = new Ext.Panel({
		title: 'Tab '+i,
		closable: true, //<-- this tab is closable
		iconCls: 'app-icon',
		tbar:[{iconCls:'save-icon'},{iconCls:'spell-icon'},{iconCls:'search-icon'},{iconCls:'send-icon'},{iconCls:'print-icon'}],
		html: 'This is the content for the tab number '+i
	});
	
	this.tabs.add(tab); //adding the tab
}

The previous code creates a panel with the property "closable", this allows the user to close the tab at any moment, we also added a toolbar that at this moment does nothing but I would like to emphasize that we can use any configuration of the component panel. The last thing we need to do is invoke the method we've just created in a loop inside of the method "init" to create the tabs dynamically like this:

init: function(){
	//… code removed
	win.show();
	
//creating 10 tabs
	for(var i=0;i<10;i++){
		this.addTab(i+1);
	}
},

Adding a scroll to the tabs

At this moment you can see that we have a problem, the last tabs don't appear because the window is smaller. We can solve this problem by adding a "scroll" to we can see the other tabs, to do that we need to use the property "enableTabScroll" of the "TabPanel" like this:

this.tabs = new Ext.TabPanel({
	border: false,
	activeTab: 0,
	enableTabScroll:true, //<-- displays a scroll for the tabs
	items:[home]
});

The complete code for this tutorial is:

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

com.quizzpot.tutorial.TabPanelTutorial = {
	init: function(){
		//Beginning of the code
		var home = new Ext.Panel({
			title:'Home',
			iconCls: 'home-icon',
			html: 'This is the home page example'
		});
		
		this.tabs = new Ext.TabPanel({
			border: false,
			activeTab: 0,
			enableTabScroll:true,
			items:[home]
		});
		
		var win = new Ext.Window({
			title:'Tabs example',
			width:600,
			height:500,
			bodyStyle: 'background-color:#fff;',
			items: this.tabs
		});
		win.show();
		
		for(var i=0;i<10;i++){
			this.addTab(i+1);
		}
	},
	
	addTab: function(i){
		//here the code to add a new tab
		var tab = new Ext.Panel({
			title: 'Tab '+i,
			closable: true, //<-- this tab is closable
			iconCls: 'app-icon',
			tbar:[{iconCls:'save-icon'},{iconCls:'spell-icon'},{iconCls:'search-icon'},{iconCls:'send-icon'},{iconCls:'print-icon'}],
			html: 'This is the content for the tab number '+i
		});
		
		this.tabs.add(tab);
	}
}

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

Conclusions

The TabPanel is a Widget widely used to create usable interfaces, it is very flexible and easy to use. I recommend you to check the API so you can know about the other properties that this components has. As always, if you have any suggestions or questions about today's tutorial you can feel free to leave a comment on this post, we will gladly answer your questions. Don't forget to follow us on Twitter (@quizzpot).

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!