En el tema anterior creamos la estructura principal de nuestro proyecto, a continuación vamos a crear el viewport principal donde únicamente vamos a definir el layout que usaremos. El objetivo principal de este tutorial es mostrar como podemos utilizar los layouts de Sencha Touch.

Lo primero que haremos será abrir el archivo app/view/Main.js y borrar su contenido para poner nuestro código.

Ext.define('Itunes.view.Main', {
    extend: 'Ext.Container',
    xtype : 'main',
    requires : [
        
    ],
    config : {
        items   : []
    }
});

Aquí estamos definiendo la clase Main que extiende de la clase Container, declaramos el xtype para poder definir selectores en nuestros controllers (Más adelante en este curso), definimos los requires que en este momento esta vacío y también definimos el objeto config con el arreglo de items vacío.

Es importante comentar que todas las propiedades que encontramos en la documentación para los componentes tienen que definirse dentro del objeto config, en este caso solo estamos usando la propiedad items, pero podríamos utilizar cualquier otra como más adelante lo haremos.

El layout principal

Solamente necesitamos dos contenedores principales, uno en la parte superior donde colocaremos la caja de búsqueda, el reproductor, algunos filtros y un contenedor en la parte inferior donde colocaremos los resultados de la búsqueda.

Para eso podemos utilizar un layout de tipo vbox, este layout nos permite alinear de manera vertical los componentes, y nos viene perfecto porque definiremos una altura específica para la cabecera y para los resultados haremos que ocupe todo el espacio disponible, esto nos permitirá que el contenido se ajuste automáticamente si el usuario ve la app en modo portrait o landscape.

config : {
    layout  : 'vbox',                  //Step 1
    items   : [{
        xtype   : 'container',
        height  : 120,                 //Step 2
        style   : 'background:#bdc3c7',
        html    : 'The Header'
    },{
        xtype   : 'component',
        flex    : 1,                   //Step 3
        style   : 'background:#ecf0f1',
        html    : 'Te Results'
    }]
}

1. Mediante la propiedad layout definimos la manera en como queremos acomodar los hijos del componente padre, en este ejemplo estamos utilizando el layout de tipo vbox, pero Sencha Touch viene con varios otros más que podemos utilizar te recomiendo revisar la documentación.
2. El siguiente paso es definir la altura de 120 pixels a la cabecera mediante la propiedad height. 
3. En el paso 3 hemos hecho flexible los resultados mediante la propiedad flex.
   

Si refrescamos nuestro navegador para que tomo los cambios anteriores podrémos observar la siguiente pantalla.

VBox layout

Profundizando en el uso de layouts

En Sencha Touch todo se maneja mediante clases, esto significa que por cada layout existe una clase responsable de manejar el renderizado, en el ejemplo anterior utilizamos el layout de type vbox que corresponde a la clase Ext.layout.VBox.

Dentro del paquete Ext.layout encontraremos todos los layouts disponibles, entre ellos veremos el card, hbox, fit y algunos otro mas. Cada uno de ellos funciona de diferente manera, te recomiendo revisar la documentación y familiarizarte con los ejemplos.

Por el momento nos enfocaremos en el vbox, este layout lo utilizamos cuando queremos hacer flexibles los componentes hijos, en este caso hicimos flexible el contenedor de los resultados, por lo tanto este contenedor tomará todo el espacio disponible.

También podemos tener todos los componentes flexibles que necesitamos, por ejemplo si le quitamos el height a la cabecera y le ponemos flex:1 veremos que cada contenedor tomará el 50% del tamaño total del viewport. 

Guardando los cambios en GIT

Vamos a hacer el commit necesario para guardar nuestros nuevos cambios en el historial de GIT.

$ git add .
$ git commit -m 'Adding the main layout'

Con eso es suficiente para registrar nuestro avance.

Experimentos

Intenta agregar un nuevo contenedor al arreglo de items con flex:1, verás que cada componente toma el 33.33% del alto del viewport, ahora intenta cambiar el el valor a uno de los contenedores por flex:2 y observa el resultado.

Intenta utilizar el layout de tipo hbox, oberva los resultados y luego intenta utilizar el layout de tipo fit.

Los layouts nos permitirán acomodar los componentes internos de una manera muy sencilla, por el momento dejaremos hasta aquí nuestra aplicación, en el siguiente tutorial comenzaremos a crear el header. 

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!