Las Pestañas o Tabs Más videos
Comentarios: 21
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
Descripción del tema
Las pestañas son muy útiles para dividir la información por secciones o por categorías, en Ext JS es muy sencillo realizar esto, este tutorial se muestra como hacerlo.
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:
El código completo para este tutorial queda de la siguiente manera:
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.Ejemplo final
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.
Tab panel en ventana con solo un tab
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.
Primer tab activado automáticamente
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);
}
},
Tabs agregados dinámicamente
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]
});
TabPanel con scroll para mover los tabs
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.Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Aprendiendo 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!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
21Comentarios
Por supuesto que me gusto el post, socio te agradesco esto y no sabes cuanto, he aprendido muchisimo con tu tutorial en solo una semana. Si no hago preguntas es por que explicas muy bien tus ideas y nunca tengo dudas, despues lo que queda es practicar. gracias otra ves
Hola, muy bueno tu curso, felicitaciones!, estoy estudiandolo atentamente. Soy un absoluto novato en estas lides y me gustaria que me respondieras la sgte consulta: se puede cargar otro elemento dentro de un tab-panel, digamos un form, desde otro archivo? Gracias
Así es, para eso utilizas la propiedad "items" del elemento padre. new Ext.TabPanel({ title: 'ejemplo', items:[grid,form,etc...] })
gracias por tu pronta respuesta, pero quisiera saber como cargar esos 'items' desde otro archivo js. si me puedes dar alguna indicacion seria fabuloso. :)
esto vale para dreamweaver por que copio el codigo fuente pero no se me ve bien
pamela:: a que te referis con que esto vale en el dreamweaver?? si podrias ser mas explicita??-... asi te ayudamos..
Buenas tardes, amigo sabes alguna forma de cambiar el color a los Tab? es decir mantener todos del mismo color por defecto de la libreria ext js que es el azul y solo hacer una de ellas roja?. Saludos!
hola, muy buen tutorial me encanta, pero tengo una pregunta, si se puede agregar tabs en tiempo de ejecucion, como puedo esconderlo y como puedo mostrarlo despues de cerrarlo con la propiedad que tiene que es closeable
Hola, primero que todo gracias por el curso. Quiero saber como puedo ingresar a cada tabs una dirección web. utilicé el iframe con src y funcionó pero el problema es que el tab sale solo en una franja de unos 300 pixel en el height.no he podido lograr que la página se vea de tamaño completo. gracias de antemano.
ups, me contesto la pregunta. Bueno todo parece ser producto de una (,) que omití por eso no me funcionaba cambiar el largo del tab.
Hola te felicito me a ayudado mucho tus tutoriales, si me podrias ayudar tengo un problema con las pestañas yo creo objetos de panel y los gregos y eso se hace perfecto el problema es cuando vuelvo a llamar a la pestaña no se carga sabes cual podria ser el problema¿?
Hola Crysfel, excelentes tus cursos fáciles de entender, pero tengo una consulta como hacer para agregar una ventana dentro de un tab, porque la idea que tengo es hacer un form diferente en cada tab
Hola como puedo cargar una nueva pestaña, digamos cuando se de clic en un boton y asi poder cargar cuantas necesite. gracias...
bueno yo mismo me respondo, aunque no se si esta sea la mejor forma es la que me funciona: com.quizzpot.tutorial.Window.addTab(id_a_crear, 'Representante '+tabuladores); ahora por si alguien me puede ayudar, como activo una de las pestañas?
Utiliza el método "activate" de la instancia del "TabPanel", ese método recibe el tab a activas o su identificador. Saludos
Buenas noches a todos, tengo una consulta, espero que me contesten he hecho ya varias consultas y hasta ahora no he recibido ninguna respuesta, bueno la pregunta es como cargar dentro de un tab un formulario que cree en otro archivo .js, es decir en un archivo tab.js creo el tab y en otro form.js creo el formulario, pues quiero llamar a form,js dentro de tab.js
Importas ambos archivos JS en tu documento y la mejor opción es programar tus componentes mediante Objetos de tal manera que solamente crees una instancia de tu formulario y lo agregues a tu tab usando "tabs.add(formulario)" recuerda hacer un "doLayout()" del componente tabs. Saludos
Cual seria la manera de cuando se selecciona un tab, este me permita que el contenido del mismo se muestre con un efecto?
Hola queria saber como hacer para que el contenido de un tab se cargue cuando lo activo??. Osea no quiero que se carguen los contenidos de los tab que no estan activos, Saludos, muy buenos los tutoriales
Hola, necesito ayuda en las tabs, no puedo colocar 2 grids en diferente tab, solo coloca un grid y el otro lo pone por encima de toda la pantalla. Agradaceria su ayuda. Saludos
holas, muy valiosa web, alguien puede indicarme como cargar un panel dentro de otro ??? GRACIAS