Sencha Touch - Controlador

El controlador es uno de los componentes principales de la arquitectura MVC.

El controlador es el componente que controla la funcionalidad. Escribimos oyente en el controlador y actúa como un pegamento entre la vista y el modelo, donde la vista es para la interfaz de usuario visual mientras que el modelo es para almacenar y manipular los datos.

Las principales funciones de un controlador son:

Las acciones están escritas en el controlador como si presionamos un botón en la aplicación o pasamos el cursor sobre algún enlace, la acción que se debe realizar está escrita en las funciones de escucha del controlador.
El controlador tiene disponibles las funciones de inicio y ejecución, que se llaman una vez que se inician la aplicación y el controlador.

Funciones de inicio y lanzamiento del controlador

Podemos definir la función de inicio e inicio en el controlador. Una aplicación puede tener su propia función de inicio, así que aquí está el orden en el que deben llamarse las funciones.

La función de inicialización del controlador se llama primero cuando se inicia la aplicación.
Entonces se llama a la función de lanzamiento de la aplicación.
La función de inicio del controlador se llama una vez que se llama al inicio de la aplicación y se inicia la aplicación.

Componentes de configuración del controlador

Podemos tener referencias y control en la configuración de un controlador. Echemos un vistazo a la forma en que funcionan ambos.

Refs

Las referencias en la configuración se pueden utilizar como se muestra en el siguiente ejemplo.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      refs: {
         tab: '#divId
      }
   },

   addLogoutButton: function() {
      this.getTab().add({
         text: 'Logout'
      });
   }
});

Las referencias se pueden utilizar para hacer referencia a cualquier identificación. Como vemos en el ejemplo anterior, la pestaña es la referencia creada que hace referencia al id #divId.

Las referencias se crean en un par clave-valor, como en el ejemplo anterior, tab es la clave y divId es el valor. Siempre que se crea una referencia, los get y setters se crean automáticamente para la misma. En el ejemplo anterior, hemos creado una referencia como pestaña para poder acceder a ella como método getTab, que se crea automáticamente.

Controlar

Control es una configuración similar a ref que toma ref como clave y el valor como función de escucha, que se llama para realizar algunas tareas.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      control: {
         loginButton: {
            tap: 'doLogin'
            // ref tap is the key and doLogin is the value which is a listener.
         }
      },

      refs: {
         loginButton: 'button[action=login]' 
      }
   },

   doLogin: function() {
      // called whenever the Login button is tapped
   }
});

Rutas

El controlador define la ruta en la que está interesado. Con la ayuda de las rutas, podemos vincular cualquier parte de la aplicación a la ruta proporcionada.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      // statements
   },
   userId: function() {
      // statements
   }
});

Se puede acceder a la ruta con la URL de la barra de direcciones del navegador.

En el ejemplo anterior, se llamará a la función del controlador showLogin si el usuario accede a la URL https://myApp.com/#login.

Las rutas también se pueden llamar con comodines, como la función userId se llamará si la URL del navegador es https://myApp.com/#user/3003

Por lo tanto, siempre que cambie la URL del navegador, la ruta llamará automáticamente a la función del controlador específico.

↰ Previous page