Ext JS следует архитектуре MVC / MVVM.
MVC — Архитектура Model View Controller (версия 4)
MVVM — модель представления 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 — содержит локально кэшированные данные, которые должны отображаться в представлении с помощью объектов модели. Store извлекает данные с использованием прокси-серверов, путь к которым определен службами для извлечения внутренних данных.
Model.js — содержит объекты, которые связывают данные магазина для просмотра. Он имеет отображение объектов данных бэкэнда в представление dataIndex. Данные извлекаются с помощью магазина.
Utils.js — он не включен в архитектуру MVC, но рекомендуется использовать его, чтобы сделать код чистым, менее сложным и более читабельным. Мы можем написать методы в этом файле и вызывать их в контроллере или в визуализаторе представления там, где это необходимо. Это также полезно для повторного использования кода.
В архитектуре MVVM контроллер заменяется на ViewModel.
ViewModel — это в основном обеспечивает изменения между представлением и моделью. Он связывает данные из модели с представлением. В то же время он не имеет прямого взаимодействия с представлением. У него есть только знание модели.
Как это устроено
Например, если мы используем один объект модели в двух-трех местах пользовательского интерфейса. Если мы изменим значение в одном месте пользовательского интерфейса, мы сможем увидеть, даже не сохранив это изменение. Значение модели изменяется и отражается во всех местах пользовательского интерфейса, где бы ни использовалась модель.
Это делает усилия разработчика намного меньше и проще, так как для связывания данных не требуется никакого дополнительного кодирования.