Uso de Componentes y Contenedores

Qué es un componente

La mayoría de las clases visuales de Sencha Touch son componentes que heredan de Ext.Component lo que les da una serie de propiedades:

• Mostrar y ocultarse en cualquier momento.

• Habilitarse y deshabilitarse.

• Centrarse en la pantalla.

• Flotar sobre otros componentes.

• Acoplar y alinear otros componentes dentro del propio componente.

• Acoplarse a otros componentes.

Qué es un contenedor

Las aplicaciones se forman mediante multitud de componentes, normalmente anidados unos dentro de otros. Los contenedores son un tipo de componente especial que permite agrupar y organizar otros componentes dentro de si mismos. La mayoría de las aplicaciones tendrán un único contenedor (el viewport) que ocupará toda la pantalla, el cual contendrá una serie de componentes hijos. Por ejemplo en una aplicación de correo el contenedor del viewport contendrá dos componentes principales, uno para la lista de mensajes y otro para la previsualización de los correos.

Los contenedores proporcionan además la siguiente funcionalidad:

• Añadir componentes hijos e instanciarlos en tiempo de ejecución.

• Eliminar componentes hijos.

• Especificar un tipo de layout.

Los layouts determinan la disposición de los componentes hijos dentro del contenedor. En la aplicación del ejemplo de correo podríamos utilizar un layout horizontal del tipo HBox para indicar que la lista se sitúe en la parte izquierda y el panel de previsualización a la derecha ocupando el resto del espacio.