Extjs 6 MVC开发模式（二）

2022-07-31 20:34:36

1、Extjs MVC开发模式

在JS的开发过程中，大规模的JS脚本难以组织和维护，这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题，在Extjs4.x版本中引入了MVC开发模式，开始将一个JS（Extjs）应用程序分割成Model-View-Controller三层，为JS应用程序的如何组织代码指明了方向，同时使得大规模JS代码变得更加易于重用和维护；这就是Extjs MVC开发模式的初衷。

在官方给出的MVC例子中，我们可以看到一个简单的列表编辑功能，这篇文章就围绕这个功能进行详细的讲解，让我们一起来揭开Extjs MVC的神秘面纱！

示例代码适用于Extjs 4.x、Extjs 5.x和Extjs 6.0.1中亲测可用！

建议1：编写的所有JS、CSS、HTML/JSP统一编码为UTF-8。

建议2：每个属性之间必须使用逗号（非中文符号），最后一个属性千万不可以使用逗号。

2、创建一个Extjs MVC程序：

index.html

系统的首页:加载样式表、核心库、app,js

app.js

命名空间、加载插件、指定app的主目录、加载控制层、创建主视图

app

Extjs程序的主程序文件夹

1）controller：所有的控制器

a）view：所有的视图组件

b）store：所有的储存数据源组件

c）model：所有的数据模型组件

2）其他自定义组件/工具：lib/util（可选，例如自定义全局校验工具类、静态数据）

2）每个应用都有一个实体，就是Application对象，而每个应用同样采用单一入口结构，有个快捷函数就是 Ext.application({config})，创建一个Application对象实例，并且运行它。Application在创建之初，会去加载Controller类，加载完毕后，会正式的lunch。

3）Application在lunch的时候，会创建一个Viewport实例，这个东西就像一个骨架一样，上面可以拼装各种View，具体说，就是各种布局形式和窗体控件，可以说是view界面的载体，一个页面只能有一个Viewport实例。

4）View纯粹是一个界面组件，或者说窗体控件的集合（比如form,grid和window）。通过Store来加载数据并且展现到界面上，界面控件的响应都写在Controller里面，View对Controller的存在一无所知，也没有代码上的依赖

5）Controller的角色完全是个粘合剂，它在加载之初，会帮忙加载跟其有关的Model，Store，View类，而其真正的作用，是通过一系列的事件处理函数(比如点击保存按钮)，确定了每个View上面界面组件对用户交互行为的响应方法，可以说是一堆事件处理器函数的集合；这里面主要通过一个 control成员函数来进行事件绑定，通过另一个叫ComponentQuery的组件，使用类似css selector的语法来定位界面上的组件，并为其绑定事件处理器。

6）Model是对抽象数据的具体化，简单理解就是数据库里面的一行记录。

7）Store是对通过网络加载数据的过程的一个抽象，Store通过data发送请求(一般为ajax请求)到后台获取数据(一般返回json格式)，Store依赖于Model，通过关联的Model对象才知道如何将取回的数据对象化。

3、Extjs MVC程序的首页

1）index.html Extjs开发环境的准备

功能：系统的首页：加载样式表、核心库、app.js

官方的例子是自动根据环境加载extjs-theme-xxxx -all.css样式表、extjs-all.js核心库以及程序入口app,js。

<script type="text/javascript" src="../../shared/include-ext.js"></script>

<script type="text/javascript" src="../../shared/options-toolbar.js"></script>

<script type="text/javascript" src="all-classes.js"></script>

<script type="text/javascript" src="app.js"></script>

官方提供了多套样式模板：

ext-6.0.1\build\classic\theme-xxxx\resources

theme- xxxx -all.css需要运行环境

@import 'theme-classic-all_1.css';

@import 'theme-classic-all_2.css';

手工导入两个css文件即可：

theme-xxxx-all_1.css theme-xxxx-all_2.css

设计自己的MVC例子时候，最好手工加载样式表、核心库:

index.html

<head>

<!--1.手工导入Extjs CSS-->

<link rel="stylesheet" type="text/css" href="resources/theme/ext-theme-neptune/build/resources/ext-theme-neptune-all_01.css" />

<link rel="stylesheet" type="text/css" href="resources/theme/ext-theme-neptune/build/resources/ext-theme-neptune-all_02.css" />

<!--2.手工导入Extjs Core JS-->

<script type="text/javascript" charset="UTF-8" src="js/ext-all.js"></script>

<!--3.app程序的入口-->

<script type="text/javascript" src="app.js"></script>

</head>

注意：需要拷贝ext-all.js和resources样式文件夹到相对的目录路径

4、Extjs MVC的App.js介绍

每个应用都有一个实体，就是Application对象，而每个应用同样采用单一入口结构，有个快捷函数就是Ext.application({config})，创建一个Application对象实例，并且运行它。Application在创建之初，会去加载Controller类，加载完毕后，会正式的lunch。

Application在lunch的时候，会创建一个Viewport实例，这个东西就像一个骨架一样，上面可以拼装各种View，具体说，就是各种布局形式和窗体控件，可以说是view界面的载体，一个页面只能有一个Viewport实例。

1）Name属性与命名空间

Ext.application({

    name: 'FV',    //指定程序的命名空间：

});

name属性用于指定程序命名空间（MVC组件）

例如controller文件夹内声明一个控制器声明规则：

Ext.define(命名空间.文件夹.文件名，{extend：'继承类型'，属性1，属性2......})；

例如controller/Articles.js

Ext.define('FV.controller.Articles', {

extend: 'Ext.app.Controller',  //必须继承Controller

Controller组件属性1:’’,

Controller组件属性2:’’

});

如此类推：

model/Article.js文件

Ext.define('FV.model.Article', {

extend: 'Ext.data.Model',

Model组件属性1:’’

});

store/Article.js文件

Ext.define('FV.store.Article', {

extend: 'Ext.data.Store',

Store组件属性1:’’

});

view/article/Grid.js文件

Ext.define('FV.view.article.Grid', {

extend: 'Ext.grid.Panel',

Grid Panel'组件属性:’’

});

view/article/Preview.js文件

Ext.define('FV.view.article.Preview', {

extend: 'Ext.panel.Panel',

Panel'组件属性:’’
});

其实最好还是在命名JS文件的时候加上对应组件的后缀（模块+组件）：

controller/Articles.js controller/ArticlesController.js

model/Article.js model/ArticleModel.js

store/Article.js文件 store/ArticleStore.js文件

view/article/Grid.js文件 view/article/ArticleGrid.js文件

view/article/ Preview.js文件 view/article/ArticlePreview.js文件

2）app.js主程序详细介绍

主程序：

a）定义程序命名前缀

b）定义主程序的文件夹路径

c）定义程序需要加载控制层

d）初始化主视图

Ext.application({

    //1.Application命名前缀

    name: 'Sys',

    //2.设置Application自定义classes的目录路径

    paths: 'app',

    //3.加载controller文件夹下的 controller类(默认所有均初始化)

    controllers: [],

    /*

    launch: function() {

        alert("init之后 确保App初始化完成后执行,等价于onReady");

    },

    init: function() {

        alert("init");

    },*/

    //4.初始化主视图(默认为paths/view/Viewport.js)

    autoCreateViewport: true

});

name属性：

用于指定程序命名空间（MVC组件），至关重要，在上面的例子已经详细讲述。

requires属性：

有的时候项目中要写一些扩展组件，随着扩展组件的增加，会造成有的页面需要使用，而有的页面不需要使用的问题，这对组件的js文件的引用造成了烦恼：如果每个页面都去引用的时候会造成浏览器打开页面的流量的增加而影响资源，如果需要的时候引用管理起来又很麻烦，Extjs4.0帮我们解决了这个问题，那就是Ext.requires。它可以实现根据我们的需要动态加在所需要的组件文件，很灵活也很方便。requires属性,在application程序中全局加载组件，动态的加载，只加载一次。

paths属性：

不声明：

app.js必须可以直接访问到controller/model等JS文件夹相对路径。

声明：

a）直接指定加载JS路径1：paths：'app'

去app文件夹下寻找controller/model等JS文件夹

b）直接指定命名空间+加载JS路径2：paths：{'App.ux':'resources/ux'}

设置目录映射'App.ux'命名空间的将去resources/ux下寻找

controller：[]属性：

启动App程序时加载所有的controller文件夹下的Controller组件并初始化。

如果程序比较大，建议动态根据模块来加载和初始化Controller组件。以及对应Controller下配置的Model、Store、View组件

init: function() {}

初始化函数，application程序初始化的时候默认执行的方法，一般不需要声明，也可以用于测试app.js是否成功初始化。

autoCreateViewport: true

自动创建application的OPOA视图，默认加载并初始化app/view/Viewport.js

Ext.define('SYSTEM.view.Viewport', {

        extend: 'Ext.container.Viewport',

        requires: [],

        layout: 'border',

        items: []

});

VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。Viewport 不需要再指定renderTo，而我们也看到Viewport 确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改变。Viewport 主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport 上常用的布局有fit、border 等，当然在需要的时候其它布局也会常用。

launch: function() {}

应用程序启动init之后。这样可以确保所有脚本加载,防止依赖问题。类似于Ext.onReady为DOM已经准备好了再执行邦定的特性。

实际用例：如application 的Viewport初始化之后才对其进行事件的邦定。

本文部分由齐飞（youring2@gmail.com）原创，并发布在http://www.qeefee.com/article/extjs-mvc-in-detail，转载请注明出处！

码农公寓

相关文章