Extjs 6.2 实战 （二）MVVM模式介绍

MVVM是模型（Model）、视图（View）和视图模型（ViewModel）的缩写，是一种软件设计模式。

MVVM主要作用就是简化事件驱动变成的用户界面开发。

它把软件系统划分为模型、视图和视图模型三个基本部分

2.1 Extjs中的MVVM模式

 Extjs中的MVVM模式将应用程序划分为视图、视图控制器和视图模型三个部分，

模型：用来显示数据的各种UI组件，如模板（Ext.Template）、数据视图（Ext.view.View）、网格（Ext.grid.Panel）或图表（Ext.chart.Chart）等组件。

视图控制器：一般是指从Ext.app.ViewController扩展的类，用于维护视图的逻辑。它的生命周期是包含在视图的生命周期中的，会随视图的创建而创建，随视图的销毁而销毁。同一个视图，创建了多少个实例，也会相应的创建多个视图控制器的实例，而不会想ExtJs4那样，无论多少个视图实例，都只对一个控制器，从而造成控制器不知道该去操控哪个视图的问题，也解决了控制器销毁的问题。

模型：一般是指从Ext.data.Model扩展出来的模型类。

视图模型：一般是指从Ext.app.ViewModel扩展的类，用于管理视图的数据。

2.2 组件查询机制

ExtJs6中引入了医用机制来获取组件，但很多时候还是需要使用到组件查询来获取组件，因而熟练掌握并了解组件查询对象是必不可少的。

2.21 组件管理器：Ext.ComponentManager

组件能够实现查询全靠组件管理器，因为在创建组件实例时都需要在组件管理器中注册，在Ext.Component类的构造函数中可以看到以下代码

constructor:function(config){

    var me = this,

......

        if(!me.preventRegister){

               Ext.ComponentManager.register(me);

         }

.......

}

在ExtJs6中，Ext.Component是所有组件的根类，而组件在初始化的时候，都会在构造函数中调用callParent方法来执行父类的