Ext.js architecture

Ext JS follows the MVC/MVVM architecture.

MVC - Model View Controller Architecture (Version 4)

MVVM - Model ViewViewmodel (Version 5)

This architecture is not mandatory for programs, but it is best to follow it to make your code highly maintainable and organized.

The project structure uses the Ext JS application

----------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

The Ext JS application folder will reside in the JavaScript folder for your project.

The application will contain controllers, views, models, storage, utility files and app .js.

App .js: The main file at the beginning of the program process should be used. s cript＆gt; /b10> Label. /b11> The application calls the rest of the functionality of the application's controller.

Controller .js: It is the controller file for the Ext JS MVC architecture. /b10> This contains all the controls of the application, the maximum functionality of the event listener's code. /b11> It has paths defined for all other files used in the application, such as store, view, model, require, mixins.

View .js: It contains the interface portion of the application and is displayed to the user. /b10> Ext JS uses a variety of UI-rich views that can be extended and customized here as needed.

Store .js: It contains locally cached data that will be rendered on the view with the help of model objects. /b10> The store uses a proxy to get data, and the agent has a path defined for the service to get back-end data.

Model .js: It contains objects that bind the store data to be viewed. /b10> It has a mapping of back-end data objects to the view dataIndex. /b11> Get data with the help of store.

Utils .js: It's not included in the MVC architecture, but the best thing to do is to make the code clearer, less complex, and more readable. /b10> We can write methods in this file and call them in the controller or view renderer. /b11> This is also helpful for code resyability purposes.

In the MVVM architecture, the controller is replaced by ViewModel.

ViewModel: It's basically a change between the drug view and the model. /b10> It binds data from the model to the view. /b11> At the same time it has no direct interaction with the view it only has the knowledge of the model.

How it worked

For example, if we use a model object in two or three places in the UI, if we change the value in one place in the UI, we can see that the value of the change model change is not even saved, so it is reflected in all the places in the UI where the model is used.

It makes it easier and easier for developers because no additional encoding binding data is required.