En este tema vamos acomodar los contenedores del header. Siempre que desarrollemos apps para móviles debemos tener en mente que los dispositivos cuentan con dos tamaños, el portrait y el landscape, los usuarios pueden estar cambiando entre estos dos modos en cualquier momento, por lo tanto debemos asegurarnos de hacer un layout flexible.

Para el caso del header necesitamos tres contenedores flexibles, que midan exactamente lo mismo y que se ajusten cuando se cambie entre portrait y landscape automáticamente.

En el tema anterior vimos como utilizar el layout de tipo vbox para acomodar los componentes verticalmente, ahora veremos como utilizar el layout hbox para hacerlo de manera horizontal.

Vamos a crear la clase Header en el archivo app/view/Header.js con el siguiente código.

Ext.define('Itunes.view.Header', {
    extend  : 'Ext.Container',
    xtype   : 'header', 
    requires: [
        
    ],

    config: {
        height  : 120,
        items   : [{
            xtype   : 'container',
            style   : 'background:#e67e22', //we will remove this later
            html    : 'Controls'
        },{
            xtype : 'container',
            style   : 'background:#d35400', //we will remove this later
            html    : 'Player'
        },{
            xtype : 'container',
            style   : 'background:#e74c3c', //we will remove this later
            html    : 'Search'
        }]
    }
});

Como se puede observar estamos extendiendo de la clase Container, mantenemos la altura de 120 (como en el tema anterior) pero ahora en el arreglo de items definimos tres contenedores, más adelante les pondremos contenido, por ahora solamente los vamos a acomodar.

Recuerda que todas las configuraciones van dentro del objeto config, de lo contrario Sencha Touch las ignorará.

Lo siguiente es incluir esta clase en nuestra vista principal de la siguiente manera.

Ext.define('Itunes.view.Main', {
    extend: 'Ext.Container',
    xtype : 'main',
    requires : [
        'Itunes.view.Header' //Step 1
    ],
    config : {
        layout  : 'vbox',
        items   : [{
            xtype   : 'header'  //Step 2
        },{
            //we are going to move this container to a class
            xtype   : 'component',
            flex    : 1,
            style   : 'background:#ecf0f1', //we will remove this later
            html    : 'The Results'
        }]
    }
});

1. En el paso 1 incluimos la clase que creamos, no me detendré a explicar esta parte ya que en el curso de Fundamentos de Ext JS se ha explicado a detalle.
2. En siguiente paso utilizamos el xtype para referirnos a nuestra nueva clase, aquí simplemente necesitamos indicar el componente que queremos posicionar mediante el xtype y ST se encargará de acomodarlo correctamente.

Si probamos nuestra app en el navegador veremos algo como la siguiente imagen.

Layout por default

Si no definimos un layout por defecto utilizaremos el layout de tipo auto y los componentes aparecerán uno por debajo del otro.

Vamos a definir el layout de tipo hbox para acomodar los componentes de manera horizontal.

config: {
    height  : 120,
    layout  : 'hbox',   //Step 1
    items   : [{
        xtype   : 'container',
        flex    : 1,    //Step 2
        style   : 'background:#e67e22', //we will remove this later
        html    : 'Controls'
    },{
        xtype : 'container',
        flex    : 1,     // <--
        style   : 'background:#d35400', //we will remove this later
        html    : 'Player'
    },{
        xtype : 'container',
        flex    : 1,     // <--
        style   : 'background:#e74c3c', //we will remove this later
        html    : 'Search'
    }]
}

1. Primero utilizamos el layout de tipo hbox para obtener el resultado deseado.
2. Lo siguiente es definir flexibles nuestros componentes, eso lo hacemos con la propiedad flex.

Al ejecutar el código anterior obtendremos algo como la siguiente imagen.

Layout HBOX

Como se puede observar los tres componentes se han posicionado de manera horizontal, además si probamos esto en el iPad y cambiamos de portrait a landscape veremos como los tamaños se ajustarán automáticamente.

Guardando en el historial de GIT

Hacemos el commit necesario para guardar nuestros nuevos cambios.

$ git add .
$ git commit -m 'Adding the header component'

Experimenta

Intenta cambiar la propiedad flex de uno de los componentes a 2 (ej: flex:2), observa los resultados obtenidos, ahora cambia los valores de los otros componentes también. 

Intenta quitarle el flex a un componente y mira los resultados, ahora ponle un width fijo y mira lo que sucede.

En el siguiente tema seguiremos trabajando con el header, posicionaremos los botones y la caja de búsqueda. Poco a poco vamos avanzando, recordemos que esta app era para ayer!!

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Tu primera app con Sencha Touch, 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!