# Layout tipo card

El *layout* tipo *Card* permite asignar muchos componentes o contenedores al mismo *layout* pero en el que solamente se mostrará uno a la vez. Como si fuera una baraja de cartas, los componentes se apilarán y solamente se mostrará uno de ellos ocupando toda la pantalla y ocultando al resto.

![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrBbRf2PrcvSPGKCTs%2Flayout_card.jpg?generation=1577179066236513\&alt=media)

En esta imagen el cuadro gris es el contenedor y la caja azul dentro de él es el elemento que actualmente se está mostrando. El resto de elementos que aparecen al lado están ocultos, pero se pueden intercambiar en cualquier momento para mostrarse.

A continuación se incluye un ejemplo de un panel con un *layout* tipo *card* que contiene cuatro tarjetas:

```javascript
var panel = Ext.create('Ext.Panel', {
    layout: 'card',
    items: [
        {
            html: "Primer item"
        },
        {
            html: "Segundo item"
        },
        {
            html: "Tercer item"
        },
        {
            html: "Cuarto item"
        }
    ]
});

panel.setActiveItem(1);
```

Por defecto se muestra la primera tarjeta, pero mediante la llamada a `panel.setActiveItem(1);` indicamos que se muestre la 2ª tarjeta (el número de elemento empieza en cero, por lo que el 1 se refiere a la 2ª posición).

Al añadir las *cartas* del *layout* las podemos crear directamente en el array de *items*, como en el ejemplo, o añadirlas posteriormente con el método `add` del panel (como ya se vio en una sección anterior).