Extjs 6 MVC开发模式（二）
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，转载请注明出处！
Extjs 6 MVC开发模式（二）的更多相关文章
- Extjs 6 MVC开发模式（一）
1.Extjs就绪函数 1)导入Extjs的CSS <link rel="stylesheet" type="text/css" href="r ...
- Extjs MVC开发模式详解
Extjs MVC开发模式详解 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式, ...
- MVC开发模式下的用户角色权限控制
前提: MVC开发模式 大概思想: 1.在MVC开发模式下,每个功能都对应着不同的控制器或操作方法名(如修改密码功能可能对应着User/changepd),把每个功能对应的控制器名和操作方法名存到数据 ...
- 【转】EXT JS MVC开发模式
原文链接:EXT JS MVC开发模式 在app(亦即根目录)文件夹下面创建controller.model.store和view文件夹,从名称上就知道他们该放置什么代码了吧.然后创建Applicat ...
- ext.js的mvc开发模式详解
ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...
- JavaWeb 之 MVC 开发模式
MVC 开发模式 一.JSP 演变历史 1. 早期只有servlet,只能使用response输出标签数据,非常麻烦 2. 后来又jsp,简化了Servlet的开发,如果过度使用jsp,在jsp中即写 ...
- MVC开发模式之Servlet+jsp+javaBean
Servlet+jsp+JavaBean组合开发是一种MVC开发模式,控制器Controller采用Servlet.模型Model采用JavaBean.视图View采用JSP. 1.Web开发的请求- ...
- 什么是MVC开发模式以及它和传统开发模式的区别
Model1模式:使用纯JSP或者JSP+JavaBean开发,存在如下缺陷:JSP页面中混合了HTML和JAVA代码,从而给代码的开发和阅读带 来了麻烦:系统后期维护和扩展非常困难,例如在JSP页面 ...
- MVC开发模式简述
了解MVC开发模式,首先我们要了解一下发展趋势 一.什么是软件设计 Jack W.Reeves 于14年前(1992年),就在其撰写的论文——<What is Software Design&g ...
随机推荐
- zabbix PHP databases support off Fail
zabbix初始化检查安装环境不通过: PHP databases support off Fail --未找到所支持的数据库 处理方法:安装Mysqli模块 ############## ...
- 一个很经典的this面试题
!function(){ this.length = 10; var fn = function(){ console.log(this.length); //输出多少? }, arr = [fn, ...
- Could not load file or assembly 试图加载格式不正确的程序
问题: 今天发布项目的时候遇到这个破问题,纳闷了好久,最后想起来自己改过程序生成的目标平台(原生成目标平台是Any CPU,被我改成了X86的). 解决方法: 改回原来的Any CPU 从新发布即可.
- 真机调试以及“Could not find Developer Disk Image”问题解决方案
真机测试步骤 1.运行Xcode,Xcode打开后,点左上角菜单'Xcode',点'Preferences'. 2.在打开的窗口中,点'Accounts',切换到账号页,然后点下面的'+'号,在弹出菜 ...
- JavaScript数组知识网络
JavaScript数据类型 基本数据类型 Boolean Null Number String Symbol Undefined 对象数据类型Object Build-in object Array ...
- YUI之数组操作
YUI的构建数组,将类数组转换成真正的数组,从而可以使用数组的所有方法 数组构建 //真正的数组返回1,类数组返回2,其余的返回0 YArray.test = function (obj) { v ...
- js中的this指向
1, 指向window 全局变量 alert(this) //返回 [object Window] 全局函数 function sayHello(){ alert(this); } sayHello( ...
- c++基础五个题（一）
一.深拷贝和浅拷贝? 浅拷贝是指源对象与拷贝对象共用一份实体,仅仅是引用的变量不同(仅仅是名称不同),对其中任何一个对象的改动都会影响另外一个对象,例如:一个人叫小王,后来改名小李,结果不管是小王死了 ...
- 管理Activity，随时随地控制Activity的销毁工作
public class ActivityManager { public static List<Activity> activityList = new ArrayList<Ac ...
- Unattended Setup Software Components (无人值守安装软件组件)
原文 http://social.technet.microsoft.com/Forums/windows/en-US/d4ad85b4-8342-4401-83ed-45cefa814ec5/una ...