Instanciar componentes

Los componentes se crean igual que el resto de clases en Sencha Touch, utilizando el método Ext.create. A continuación se incluye un ejemplo:

var panel = Ext.create('Ext.Panel', {
    html: 'Esto es un panel'
});

Este trozo de código crea una instancia de un panel, le asigna un contenido HTML básico y lo almacena en la variable panel. Un Panel es un tipo de componente que puede contener HTML u otros items o paneles.

En el código de ejemplo simplemente se instancia el panel pero sin llegar a mostrarse, esto es porque al instanciar un elemento no se renderiza (no se hace visible) en la pantalla de forma automática. Esta característica nos permite crear componentes cuando queramos y mostrarlos cuando nos hagan falta, lo cual en general será más rápido que instanciarlos y mostrarlos inmediatamente.

Si queremos mostrar el panel que hemos creado simplemente tendríamos que añadirlo al viewport de la aplicación, de la forma:

Ext.Viewport.add(panel);