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.

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:

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).