Configuración de componentes

Al crear un componente le podemos pasar un objecto con las opciones para configurarlo. Este objecto lo podemos crear directamente en la propia declaración del componente englobando las opciones entres llaves {} e indicando las opciones de configuración como pares de clave - valor. Por ejemplo:

// Crear la aplicación con sus opciones de configuración
Ext.application({
    name : 'MiApp',
    launch : function() { ; }
});

// Crear un panel y pasarle opciones de configuración
 var panel = Ext.create('Ext.Panel', {
    fullscreen: true,
    html: 'Esto es un panel!'
});

Cada componente tiene multitud de opciones de configuración, las cuales las podemos consultar en la documentación de Sencha Touch.

Al instanciar el objeto podemos pasarle tantas opciones de configuración como queramos, las cuales las podremos consultar después o modificar, por ejemplo:

Ext.application({
    name : 'MiApp',
    requires: ['Ext.MessageBox'],
    launch : function() {
        // Crear un panel y pasarle opciones de configuración
        var panel = Ext.create('Ext.Panel', {
            fullscreen: true,
            html: 'Esto es un panel!'
        });

        // Actualizar el HTML del panel
        panel.setHtml('Nuevo HTML!');

        // Obtener el HTML del panel y mostrarlo
        Ext.Msg.alert(panel.getHtml());
}});

Cada opción de configuración tiene sus métodos tipo getter y setter, se generan automáticamente a partir del nombre del atributo por lo que siempre siguen el mismo patrón. Por ejemplo, la opción de configuración html tiene los métodos getHtml y setHtml, o por ejemplo la opción de configuración defaultType tiene los métodos getDefaultType y setDefaultType.