Ext.js - Architecture
Ext JS follows MVC/ MVVM architecture.
MVC − Model View Controller architecture (version 4)
MVVM − Model View Viewmodel (version 5)
This architecture is not mandatory for the program, however, it is a best practice to follow this structure to make your code highly maintainable and organized.
Project Structure with Ext JS App
----------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
Ext JS app folder will reside in JavaScript folder of your project.
The App will contain controller, view, model, store, and utility files with app.js.
app.js − The main file from where the flow of program will start, which should be included in the main HTML file using <script> tag. App calls the controller of application for the rest of the functionality.
Controller.js − It is the controller file of Ext JS MVC architecture. This contains all the control of the application, the events listeners, and most of the functionality of the code. It has the path defined for all the other files used in that application such as store, view, model, require, mixins.
View.js − It contains the interface part of the application, which shows up to the user. Ext JS uses various UI rich views, which can be extended and customized here according to the requirement.
Store.js − It contains the data locally cached which is to be rendered on the view with the help of model objects. Store fetches the data using proxies which has the path defined for services to fetch the backend data.
Model.js − It contains the objects which binds the store data to view. It has the mapping of backend data objects to the view dataIndex. The data is fetched with the help of store.
Utils.js − It is not included in MVC architecture but a best practice to use to make the code clean, less complex, and more readable. We can write methods in this file and call them in the controller or the view renderer wherever required. It is helpful for code reusability purpose as well.
In MVVM architecture, the controller is replaced by ViewModel.
ViewModel − It basically mediates the changes between view and model. It binds the data from the model to the view. At the same time, it does not have any direct interaction with the view. It has only knowledge of the model.
How It Works
For example, if we are using one model object at two-three places in UI. If we change the value at one place of UI, we can see without even saving that change. The value of model changes and so gets reflected in all the places in the UI, wherever the model is used.
It makes the developer's effort much lesser and easier as no extra coding is required for binding data.
