Sencha Touch - Contrôleur

Le contrôleur est l'un des principaux composants de l'architecture MVC.

Le contrôleur est le composant qui contrôle la fonctionnalité. Nous écrivons l'auditeur dans le contrôleur et il agit comme un lien entre la vue et le modèle, où la vue est pour l'interface utilisateur visuelle tandis que le modèle est pour stocker et manipuler les données.

Les principales fonctions d'un contrôleur sont -

Les actions sont écrites dans le contrôleur comme si nous appuyions sur un bouton de l'application ou survolions un lien, l'action à effectuer est écrite dans les fonctions d'écoute du contrôleur.
Le contrôleur a la fonction d'initialisation et de lancement disponible, qui sont appelées une fois que l'application et le contrôleur sont lancés.

Fonctions d'initialisation et de lancement du contrôleur

Nous pouvons définir la fonction de lancement et d'initialisation dans le contrôleur. Une application peut avoir sa propre fonction de lancement, voici donc l'ordre dans lequel les fonctions doivent être appelées.

La fonction d'initialisation du contrôleur est appelée en premier lorsque l'application démarre.
Ensuite, la fonction de lancement de l'application est appelée.
La fonction de lancement du contrôleur est appelée une fois que le lancement de l'application est appelé et que l'application est lancée.

Configurer les composants du contrôleur

On peut avoir des refs et control dans la config d'un controller. Jetons un coup d'œil à la façon dont les deux fonctionnent.

Réfs

Les références dans config peuvent être utilisées comme indiqué dans l'exemple suivant.

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

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

Les références peuvent être utilisées pour désigner n'importe quel identifiant. Comme nous le voyons dans l'exemple ci-dessus, l'onglet est la ref créée qui fait référence à l'id #divId.

Les références sont créées dans une paire clé / valeur, comme dans l'exemple ci-dessus, tab est la clé et divId est la valeur. Chaque fois qu'une référence est créée, les get et les setters sont automatiquement créés pour la même chose. Dans l'exemple ci-dessus, nous avons créé une référence en tant qu'onglet afin de pouvoir y accéder en tant que méthode getTab, qui est automatiquement créée.

Contrôle

Control est une configuration similaire à ref qui prend ref comme clé et la valeur comme fonction listen, qui est appelée pour effectuer certaines tâches.

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
   }
});

Itinéraires

Le contrôleur définit la route qui l'intéresse. A l'aide des routes, nous pouvons lier n'importe quelle partie de l'application à la route fournie.

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

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

Route est accessible avec l'URL de la barre d'adresse du navigateur.

Dans l'exemple ci-dessus, la fonction de contrôleur showLogin sera appelée si l'utilisateur accède à l'url https://myApp.com/#login.

Les routes peuvent également être appelées avec des caractères génériques, comme la fonction userId sera appelée si l'URL du navigateur est https://myApp.com/#user/3003

Par conséquent, chaque fois que l'URL du navigateur change, la route appellera automatiquement la fonction de contrôleur spécifique.

↰ Previous page