Ext.js - 架构

Ext.js架构 - 从简单和简单的步骤学习ExtJS，从基本到高级概念，包括概述，环境设置，命名约定，架构，编写第一个Ext JS程序，OOPS概念，Dom操作，自定义事件和监听器，容器和布局，GUI控件（xType），UI组件，调试Ext JS代码，内置函数，类系统，拖放，主题，自定义事件和监听器，数据，字体，样式，绘图，本地化，辅助功能，调试代码，方法。

Ext JS遵循MVC/MVVM架构.

MVC : 模型视图控制器架构(版本4)

MVVM : 模型视图视图模型(版本5)

此体系结构对于程序不是必需的，但是，遵循此结构使代码具有高度可维护性和组织性是最佳实践.

使用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文件夹将驻留在项目的JavaScript文件夹中.

该应用程序将包含控制器，视图app.js创建，模型，商店和实用程序文件.

app.js : 程序流程将从哪里开始的主文件，应该使用< script>包含在主HTML文件中.标签.应用程序调用应用程序的控制器以实现其余功能.

Controller.js : 它是Ext JS MVC架构的控制器文件.它包含应用程序的所有控件，事件侦听器以及代码的大部分功能.它具有为该应用程序中使用的所有其他文件定义的路径，例如store，view，model，require，mixins.

View.js : 它包含应用程序的界面部分，向用户显示. Ext JS使用各种UI丰富的视图，可以根据需要在这里进行扩展和自定义.

Store.js : 它包含本地缓存的数据，这些数据将在模型对象的帮助下在视图上呈现.存储使用代理获取数据，代理具有为服务定义的路径以获取后端数据.

Model.js : 它包含将商店数据绑定到视图的对象.它具有后端数据对象到视图dataIndex的映射.在商店的帮助下获取数据.

Utils.js : 它不包含在MVC体系结构中，而是用于使代码清洁，不太复杂和可读性的最佳实践.我们可以在此文件中编写方法，并在需要时在控制器或视图渲染器中调用它们.它也有助于代码可重用性.

在MVVM架构中，控制器被ViewModel取代.

ViewModel : 它基本上调解了视图和模型之间的变化.它将数据从模型绑定到视图.同时，它与视图没有任何直接的交互.它只知道模型.

工作原理

例如，如果我们在UI中的两到三个位置使用一个模型对象.如果我们在UI的某个位置更改值，我们甚至可以看到保存该更改.无论模型在何处使用，模型更改的值都会反映在UI中的所有位置.

它使开发人员的工作量更小，更容易，因为不需要额外的编码绑定数据.