# 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:

```javascript
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:

![](https://github.com/ajgallego/sencha-touch-2/tree/384ce23e56bef37de51837d0bc0af6da7768727f/images/web_sencha/sencha_tabpanel_1.png)

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:

```javascript
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:

![](https://github.com/ajgallego/sencha-touch-2/tree/384ce23e56bef37de51837d0bc0af6da7768727f/images/web_sencha/sencha_tabpanel_2.png)

## 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:

```javascript
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'
                }
            ]
        });
    }
});
```