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 ...
随机推荐
-
Cucumber命令行接口
1. cucumber的命令行选项 首先查看命令行选项.和其它命令行工具一样,cucumber提供了—help选项.下面是cucumber帮助的一个缩减版本: $ cucumber --help -r ...
-
【PSR规范专题(1)】PSR-0+namespace+spl_autoload_register实现框架模型
了解命名空间 namespace是PHP5.3版本加入的新特性,用来解决在编写类库或应用程序时创建可重用的代码如类或函数时碰到的两类问题: 用户编写的代码与PHP内部的类/函数/常量或第三方类/函数/ ...
-
ScheduledExecutorService的用法——定时执行两个任务
package control; import java.text.DateFormat; import java.text.ParseException; import java.text.Simp ...
-
Codeforces Round #324 (Div. 2) B. Kolya and Tanya 快速幂
B. Kolya and Tanya Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/584/pro ...
-
Convert.ToInt32()和int.Parse()的区别
(1)Convert.ToInt32(null)会返回0而不会报异常,但int.Parse(null)则会产生异常 (2)Convert.ToInt32("")和int.Parse ...
-
mysql uodate select子查询
UPDATE user SET pwd='123' WHERE id in ( SELECT id from user WHERE username = 'zx' ); 报错[Err] 1093 ...
-
Linux学习之CentOS(十一)-----Linux 账号管理(转)
Linux 账号管理(转) useraddpasswdchageusermoduserdelfingerchfnchshidgroupaddgroupmodgroupdelgpasswd su(帐号切 ...
-
搜索引擎solr和elasticsearch
刚开始接触搜索引擎,网上收集了一些资料,在这里整理了一下分享给大家. 一.关于搜索引擎 搜索引擎(Search Engine)是指根据一定的策略.运用特定的计算机程序从互联网上搜集信息,在对信息进行组 ...
-
RDIFramework.NET V3.3 WinForm版新增订单管理主从表事例
功能描述 无论什么系统,除了常规的单表处理外,主从表的应用都是非常普遍的,RDIFramework.NET V3.3 WinForm版本中新增了一个主从表的事例供大家参考.主从表的界面设计大同小异,主 ...
-
Spring定时器配置与运用，及Cron表达式的详解
一:首先在spring的配置文件里配置一个定时器 <task:executor id="executor" pool-size="5" /> < ...