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 utipty 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 apppcation for the rest of the functionapty.

Controller.js − It is the controller file of Ext JS MVC architecture. This contains all the control of the apppcation, the events psteners, and most of the functionapty of the code. It has the path defined for all the other files used in that apppcation such as store, view, model, require, mixins.

View.js − It contains the interface part of the apppcation, 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 reusabipty 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.