Ext.js - Architecture

Ext JS suit l'architecture MVC / MVVM.

MVC - Architecture Model View Controller (version 4)

MVVM - Model View Viewmodel (version 5)

Cette architecture n'est pas obligatoire pour le programme, cependant, il est recommandé de suivre cette structure pour rendre votre code hautement maintenable et organisé.

Structure de projet avec l'application Ext JS

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Le dossier de l'application Ext JS résidera dans le dossier JavaScript de votre projet.

L'application contiendra des fichiers de contrôleur, de vue, de modèle, de magasin et d'utilitaire avec app.js.

app.js- Le fichier principal à partir duquel le flux du programme démarrera, qui devrait être inclus dans le fichier HTML principal en utilisant la balise <script>. L'application appelle le contrôleur de l'application pour le reste de la fonctionnalité.

Controller.js- Il s'agit du fichier contrôleur de l'architecture Ext JS MVC. Il contient tout le contrôle de l'application, les écouteurs d'événements et la plupart des fonctionnalités du code. Il a le chemin défini pour tous les autres fichiers utilisés dans cette application tels que stocker, afficher, modèle, require, mixins.

View.js- Il contient la partie interface de l'application, qui apparaît à l'utilisateur. Ext JS utilise diverses vues riches de l'interface utilisateur, qui peuvent être étendues et personnalisées ici en fonction des besoins.

Store.js- Il contient les données mises en cache localement qui doivent être rendues sur la vue à l'aide d'objets de modèle. Store récupère les données à l'aide de proxys dont le chemin est défini pour que les services récupèrent les données du backend.

Model.js- Il contient les objets qui lient les données du magasin à afficher. Il a le mappage des objets de données backend vers la vue dataIndex. Les données sont récupérées à l'aide de store.

Utils.js- Il n'est pas inclus dans l'architecture MVC mais constitue une bonne pratique à utiliser pour rendre le code propre, moins complexe et plus lisible. Nous pouvons écrire des méthodes dans ce fichier et les appeler dans le contrôleur ou le moteur de rendu de vue si nécessaire. Il est également utile à des fins de réutilisation du code.

Dans l'architecture MVVM, le contrôleur est remplacé par ViewModel.

ViewModel- Il médiatise essentiellement les changements entre la vue et le modèle. Il lie les données du modèle à la vue. En même temps, il n'a aucune interaction directe avec la vue. Il n'a connaissance que du modèle.

Comment ça fonctionne

Par exemple, si nous utilisons un objet modèle à deux ou trois endroits dans l'interface utilisateur. Si nous modifions la valeur à un endroit de l'interface utilisateur, nous pouvons voir sans même enregistrer ce changement. La valeur du modèle change et est donc reflétée à tous les endroits de l'interface utilisateur, partout où le modèle est utilisé.

Cela rend l'effort du développeur beaucoup moins et plus facile car aucun codage supplémentaire n'est requis pour la liaison des données.