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 but it is best practice to follow this structure to make your code highly maintainable and organized.
The App will contain controller, view, model, store, utility files with app.js.
app.js: the main file from where the flow of program will start, which should be included in main HTML file using <script> tag. App calls the controller of application for rest of the functionality.
Controller.js: It is the controller file of Ext JS MVC architecture. This contains all the control of application, the events listeners the most functionality of 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 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 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 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 more readable. We can write methods in this file and call them in controller or view renderer where ever required. It is helpful for code reusability purpose as well.
In MVVM architecture controller is replaced by ViewModel.
ViewModel: It is basically medicates the changes between view and model. It binds the data from model to view. At the same time it does not have any direct interaction with view it has only knowledge of model.
It makes developers effort much lesser and easier as no extra coding is required for binding data.
MVC – Model View Controller architecture (version 4)
MVVM – Model View Viewmodel (version 5)
This architecture is not mandatory for the program but it is 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 filesExt JS app folder will reside in JavaScript folder of your project.
The App will contain controller, view, model, store, utility files with app.js.
app.js: the main file from where the flow of program will start, which should be included in main HTML file using <script> tag. App calls the controller of application for rest of the functionality.
Controller.js: It is the controller file of Ext JS MVC architecture. This contains all the control of application, the events listeners the most functionality of 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 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 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 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 more readable. We can write methods in this file and call them in controller or view renderer where ever required. It is helpful for code reusability purpose as well.
In MVVM architecture controller is replaced by ViewModel.
ViewModel: It is basically medicates the changes between view and model. It binds the data from model to view. At the same time it does not have any direct interaction with view it has only knowledge of 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 UI where ever the model is used.It makes developers effort much lesser and easier as no extra coding is required for binding data.
No comments:
Post a Comment