Ext.js - Архитектура

Ext JS следует архитектуре MVC / MVVM.

MVC - Архитектура Model View Controller (версия 4)

MVVM - Модель View Viewmodel (версия 5)

Эта архитектура не является обязательной для программы, однако рекомендуется следовать этой структуре, чтобы сделать ваш код легко поддерживаемым и организованным.

Структура проекта с приложением 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

Папка приложения Ext JS будет находиться в папке JavaScript вашего проекта.

Приложение будет содержать файлы контроллера, представления, модели, магазина и служебных программ с app.js.

app.js- Основной файл, из которого будет запускаться поток программы, который должен быть включен в основной файл HTML с помощью тега <script>. Приложение вызывает контроллер приложения для выполнения остальных функций.

Controller.js- Это файл контроллера архитектуры Ext JS MVC. Он содержит все элементы управления приложением, слушателей событий и большую часть функциональных возможностей кода. У него есть путь, определенный для всех других файлов, используемых в этом приложении, таких как store, view, model, require, mixins.

View.js- Он содержит интерфейсную часть приложения, которая отображается пользователю. Ext JS использует различные представления с расширенными возможностями пользовательского интерфейса, которые могут быть расширены и настроены здесь в соответствии с требованиями.

Store.js- Он содержит локально кэшированные данные, которые должны отображаться на виде с помощью объектов модели. Магазин извлекает данные с помощью прокси-серверов, для которых определен путь для сервисов для получения данных серверной части.

Model.js- Он содержит объекты, которые привязывают данные магазина к просмотру. Он имеет сопоставление объектов данных серверной части с представлением dataIndex. Данные извлекаются с помощью магазина.

Utils.js- Он не включен в архитектуру MVC, но рекомендуется использовать для того, чтобы сделать код чистым, менее сложным и более читаемым. Мы можем писать методы в этом файле и вызывать их в контроллере или рендерере представления, где это необходимо. Это также полезно для повторного использования кода.

В архитектуре MVVM контроллер заменен ViewModel.

ViewModel- По сути, это посредник при изменении вида и модели. Он связывает данные из модели с представлением. В то же время он не имеет прямого взаимодействия с видом. У него есть только знание модели.

Как это устроено

Например, если мы используем один объект модели в двух-трех местах пользовательского интерфейса. Если мы изменим значение в одном месте пользовательского интерфейса, мы сможем увидеть, даже не сохраняя это изменение. Ценность модели меняется и поэтому отражается во всех местах пользовательского интерфейса, где бы модель ни использовалась.

Это значительно упрощает и сокращает усилия разработчика, поскольку для привязки данных не требуется дополнительного кодирования.