Blog

Material de apoyo

Antes de continuar asegúrate de descargar los recursos para este tema, descomprimir el ZIP y copiar el contenido dentro de la carpeta “paneles” que creamos al inicio de este capítulo.

Para este tutorial vamos a crear una ventana, dentro de ésta vamos a colocar un TabPanel con varios tabs que crearemos dinámicamente en tiempo de ejecución, te invito que veas el demo que he preparado.

El TabPanel

Un TabPanel es un contenedor de pestañas o tabs, no existe un componente “Tab” pero podemos agregarle el componente “Ext.Panel”, “Ext.grid.GridPanel”, “Ext.tree.TreePanel” y cualquier componente que herede del “Panel”.

A continuación vamos a crear el TabPanel de la siguiente manera:

//creamos el primer 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 //le agregamos el primer tab
});

En el código anterior primero se creó un panel que será el home, luego se ha creado el “TabPanel” y únicamente se le está asignando la variable “home” para convertirse en el primer tab, hasta ahora no se ve nada en la pantalla, esto es porque no lo hemos “renderizado”, para mostrarlo podemos utilizar la propiedad “renderTo”, o el método “render” o en este caso utilizar una ventana que contenga el “TabPanel” de la siguiente manera:

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

El código anterior debe ser familiar para nosotros, pues ya lo hemos estudiado en temas anteriores, si actualizamos la página donde se ejecuta este script veremos algo semejante a la siguiente imagen.

Si eres observador notarás que el tab “home” no aparece activado hasta que le damos clic con el Mouse y aparece su contenido; si queremos que el contenido aparezca desde el principio tenemos que utilizar la propiedad “activeTab” y asignarle el índice del tab que queremos activar, entonces el código del “TabPanel” quedaría de la siguiente manera:

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

Es importante notar que los índices comienzan en “0”, por lo tanto para activar el primero tenemos que activar el tab con el índice cero.

Agregar Tabs en tiempo de ejecución

Ahora vamos a agregar varios tabs en tiempo de ejecución, es decir dinámicamente, para eso vamos a escribir el código necesario dentro del método “addTab” que se encuentra en el objeto “TabPanelTutorial” el cual ya viene definido en el material de apoyo que descargamos, dentro de este método vamos a crear un panel y se lo vamos a agregar el “TabPanel” que hemos creado anteriormente.

addTab: function(i){
	//aquí va el código para agregar un nuevo tab
	var tab = new Ext.Panel({
		title: 'Tab '+i,
		closable: true, //<-- este tab se puede cerrar
		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); //con esto le agregamos el tab
}

El código anterior crea un panel con la propiedad “closable”, esto hace que el tab pueda ser cerrado por el usuario en cualquier momento, además se le agregó una barra de herramientas, la cual no hace nada pero quiero enfatizar que podemos utilizar cualquier configuración del componente Panel.

Por último necesitamos invocar el método que acabamos de crear mediante un ciclo dentro del método “init” de la siguiente manera:

init: function(){
	//… código removido
	win.show();

//creamos 10 tabs
	for(var i=0;i<10;i++){
		this.addTab(i+1);
	}
},

Agregar un scroll a los tabs

Hasta ahora tenemos un problema, y es que no aparecen los últimos tabs porque la ventana es más pequeña, esto lo podemos solucionar agregando un “scroll” para que podamos desplazar los tabs y mirar todos por medio de la propiedad “enableTabScroll” del “TabPanel” de la siguiente manera:

this.tabs = new Ext.TabPanel({
	border: false,
	activeTab: 0,
	enableTabScroll:true, //<-- muestra un scroll para los tabs
	items:[home]
});

El código completo para este tutorial queda de la siguiente manera:

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

com.quizzpot.tutorial.TabPanelTutorial = {
	init: function(){
		//Aquí está el código inicial
		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);

Conclusiones

El TabPanel es un Widget muy utilizado para crear interfaces usables, además es muy flexible y fácil de utilizar, te recomiendo mirar el API para que conozcas algunas otras propiedades de este componente y como siempre si tienes dudas o sugerencias favor de hacerlas en los comentarios o bien suscríbete en el foro el cual esta creciendo poco a poco con la ayuda de todos ustedes.