Ext.js - Arquitectura

Ext JS sigue la arquitectura MVC / MVVM.

MVC - Arquitectura Model View Controller (versión 4)

MVVM - Model View Viewmodel (versión 5)

Esta arquitectura no es obligatoria para el programa, sin embargo, es una buena práctica seguir esta estructura para que su código sea altamente mantenible y organizado.

Estructura del proyecto con la aplicación 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

La carpeta de la aplicación Ext JS residirá en la carpeta JavaScript de su proyecto.

La aplicación contendrá archivos de controlador, vista, modelo, tienda y utilidades con app.js.

app.js- El archivo principal desde donde comenzará el flujo del programa, que debe incluirse en el archivo HTML principal usando la etiqueta <script>. La aplicación llama al controlador de la aplicación para el resto de la funcionalidad.

Controller.js- Es el archivo controlador de la arquitectura Ext JS MVC. Contiene todo el control de la aplicación, los oyentes de eventos y la mayor parte de la funcionalidad del código. Tiene la ruta definida para todos los demás archivos utilizados en esa aplicación, como almacenar, ver, modelar, requerir, mixins.

View.js- Contiene la parte de interfaz de la aplicación, que se muestra al usuario. Ext JS utiliza varias vistas enriquecidas de IU, que se pueden ampliar y personalizar aquí de acuerdo con los requisitos.

Store.js- Contiene los datos almacenados en caché local que se van a representar en la vista con la ayuda de objetos modelo. Store obtiene los datos mediante proxies que tienen la ruta definida para que los servicios obtengan los datos del backend.

Model.js- Contiene los objetos que vinculan los datos de la tienda a ver. Tiene el mapeo de objetos de datos de backend a la vista dataIndex. Los datos se obtienen con la ayuda de store.

Utils.js- No está incluido en la arquitectura MVC, pero es una práctica recomendada para hacer que el código sea limpio, menos complejo y más legible. Podemos escribir métodos en este archivo y llamarlos en el controlador o en el renderizador de vista cuando sea necesario. También es útil para fines de reutilización de código.

En la arquitectura MVVM, el controlador se reemplaza por ViewModel.

ViewModel- Básicamente media los cambios entre vista y modelo. Vincula los datos del modelo a la vista. Al mismo tiempo, no tiene ninguna interacción directa con la vista. Solo tiene conocimiento del modelo.

Cómo funciona

Por ejemplo, si usamos un objeto modelo en dos o tres lugares en la interfaz de usuario. Si cambiamos el valor en un lugar de la IU, podemos ver sin siquiera guardar ese cambio. El valor del modelo cambia y, por lo tanto, se refleja en todos los lugares de la interfaz de usuario, donde sea que se utilice el modelo.

Hace que el esfuerzo del desarrollador sea mucho menor y más fácil, ya que no se requiere codificación adicional para vincular datos.