Extjs 6 MVC开发模式（二）

时间 2020-06-20

标签 extjs mvc 开发模式繁體版

原文原文链接

一、Extjs MVC开发模式javascript

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

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

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

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

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

二、建立一个Extjs MVC程序：
数据库

index.htmljson

系统的首页:加载样式表、核心库、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对象才知道如何将取回的数据对象化。

三、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样式文件夹到相对的目录路径

四、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，转载请注明出处！