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 ...
随机推荐
- mybatis参数查询
单个参数查询 在mapper.xml配置文件中配置 <select id= "selectByNu" paramet ...
- EffectiveC#5--始终提供ToString()
1.System.Object版的ToString()方法只返回类型的名字 2.知道要重写它,返回更有意义的信息,最好是提供几个重载版本. 3.当你设计更多的复杂的类型时(格式化文本)应该实现应变能力 ...
- CSU 1808 地铁
题意: ICPCCamp 有 n 个地铁站,用 1,2,-,n 编号. m 段双向的地铁线路连接 n 个地铁站,其中第 i 段地铁属于 ci 号线,位于站 ai,bi 之间,往返均需要花费 ti 分钟 ...
- ARM编译空间属性（转）
原文地址:http://www.cnblogs.com/hongzg1982/articles/2205093.html 1. 程序的空间属性 一般情况下,一个程序本质上都是由 bss段.data段. ...
- mysql中函数DISTINCT，group by，CONCAT及GROUP_CONCAT的使用
一:DISTINCT 在使用mysql时,有时需要查询出某个字段不重复的记录,虽然mysql提供有distinct这个关键字来过滤掉多余的重复记录只保留一条,但往往只用它来返回不重复记录的条数,而不是 ...
- mysql截取字符串
mysql 字符串截取1.从左开始截取字符串left(str,length)被截取字段,截取长度select left('admin1213',5) from table 2.从右开始截取字符串rig ...
- linux cat命令的<<EOF
初初开始学习linux的命令,只对linux一些简单命令有一些了解! 首先我看到网上有一些创建一个文件采用的命令是(mkdir创建文件夹):cat > test1.txt <<EOF ...
- 基于jQuery UI的tabs选项卡美化
很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...
- web.xml中配置Spring中applicationContext.xml的方式
2011-11-08 16:29 web.xml中配置Spring中applicationContext.xml的方式 使用web.xml方式加载Spring时,获取Spring applicatio ...
- wordpress教程之如何修改与制作wordpress的作者页面
一.如何使用与创建作者页面 一般情况下,多数主题下都有author.php这个文件,这既是作者展示页面.如果发现自己正在使用的主题中没有author.php这个文件的话, Wordpress 会默认寻 ...