TabPanel

Un TabPanel es similar a un panel con un layout tipo card, pero al que se ha añadido además la funcionalidad de mostrar automáticamente una barra de herramientas con la lista de tabs que contiene y que nos permitirá cambiar entre ellos.

Esta barra de tabs se puede posicionar en la parte superior (top) o en la inferior (bottom) del panel, y opcionalmente se le puede asignar un título e iconos a los botones.

En el siguiente ejemplo se muestra un TabPanel con los tabs en la parte inferior, además se le han añadido iconos:

Ext.application({
    name: 'MiApp',
    launch: function() {
        Ext.create('Ext.TabPanel', {
            fullscreen: true,
            tabBarPosition: 'bottom',
            defaults: {
                styleHtmlContent: true
            },
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Home Screen'
                },
                {
                    title: 'Contact',
                    iconCls: 'user',
                    html: 'Contact Screen'
                }
            ]
        });
    }
});

El cual se mostraría como:

Como se puede observar la barra de tabs automáticamente se configura con su icono y título, además al pulsar sobre ellos se realizaría una animación para cambiar de panel. Si no se especifica el atributo tabBarPosition la barra por defecto se situará en la parte superior, a continuación se incluye un ejemplo:

Ext.application({
    name: 'MiApp',
    launch: function() {
        Ext.create('Ext.TabPanel', {
            fullscreen: true,
            defaults: {
                styleHtmlContent: true
            },
            items: [
                {
                    title: 'Home',
                    html: 'Home Screen'
                },
                {
                    title: 'Contact',
                    html: 'Contact Screen'
                }
            ]
        });
    }
});

El cual se mostraría como:

Animaciones en un TabPanel

Los TabPanel realizan el cambio de panel automáticamente (no tenemos que escribir código para esto) y tienen asignada la animación tipo slide por defecto. Si queremos podemos cambiarla por cualquier otra (podemos usar las mismas que en un card layout) de la forma:

Ext.application({
    name: 'MiApp',
    launch: function() {
        Ext.create('Ext.TabPanel', {
            fullscreen: true,
            defaults: {
                styleHtmlContent: true
            },
            layout: {
                type: 'card',
                animation: {
                    type: 'fade'
                }
            },
            items: [
                {
                    title: 'Home',
                    html: 'Home Screen'
                },
                {
                    title: 'Contact',
                    html: 'Contact Screen'
                }
            ]
        });
    }
});