ext.js的mvc开发模式详解
ext.js的mvc开发模式详解和环境配置
在JS的开发过程中，大规模的JS脚本难以组织和维护，这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题，在Extjs 4.x版本中引入了MVC开发模式，开始将一个JS（Extjs）应用程序分割成Model-View-Controller三层，为JS应用程序的如何组织代码指明了方向，同时使得大规模JS代码变得更加易于重用和维护；这就是Extjs MVC开发模式的初衷。
找了很多博客才找到能让新手也容易理解的从传统的html，css，js引入的模式到mvc的开发。
mvc是Model-View-Controller三层
先来一个例子，下面是效果图，它的功能非常简单：在页面打开的时候加载一个列表，当双击列表中一行数据的时候打开编辑窗口，编辑完成之后点击保存按钮，然后更新列表。
这边是代码： 注意这边引入的本地ext文件，如需自己试试代码，请引入自己本地的文件！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--ExtJs框架开始-->
<script type="text/javascript" src="Ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<!--ExtJs框架结束-->
<script type="text/javascript">
Ext.onReady(function () {
//1.定义Model
Ext.define("MyApp.model.User", {
extend: "Ext.data.Model",
fields: [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'phone', type: 'string' }
]
}); //2.创建store
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
data: [
{ name: "Tom", age: 5, phone: "123456" },
{ name: "Jerry", age: 3, phone: "654321" }
]
}); //3.创建grid
var viewport = Ext.create("Ext.container.Viewport", {
layout: "fit",
items: {
xtype: "grid",
model: "MyApp.model.User",
store: store,
columns: [
{ text: '姓名', dataIndex: 'name' },
{ text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0' },
{ text: '电话', dataIndex: 'phone' }
]
}
}); //4.添加双击编辑
var grid = viewport.down("grid");
grid.on("itemdblclick", function (me, record, item, index, e, eopts) {
//5.创建编辑表单
var win = Ext.create("Ext.window.Window", {
title: "编辑用户",
width: 300,
height: 200,
layout: "fit",
items: {
xtype: "form",
margin: 5,
border: false,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 60
},
items: [
{ xtype: "textfield", name: "name", fieldLabel: "姓名" },
{ xtype: "numberfield", name: "age", fieldLabel: "年龄" },
{ xtype: "textfield", name: "phone", fieldLabel: "电话" }
]
},
buttons: [
{
text: "保存", handler: function () {
win.down("form").updateRecord();
record.commit();
win.close();
}
}
]
});
win.down("form").loadRecord(record);
win.show();
});
});
</script>
</head>
<body>
</body>
</html>
不是mvc的上图效果代码
这段代码中，我们用到了Model、Store、Grid，以及编辑的Window和Form。代码中已经给出了简单的注释，这不是重点，下面的才是关键。
Extjs MVC开发模式
对mvc有一点点了解的朋友们都知道大概是什么模式，下面是我对Ext 的mvc的阐述：
1>三个层：Model、View和Controller，这三层是必不可少的；
2>Ext是全部都用js来写的页面，也就不存在自己写的css和html，js在html中运行是需要一个宿主页面的，那就是一个且仅是唯一的一个index.html文件，在这个html文件中引入所需要的js文件（不过也有的这个html也可以用php写，这边需要看仔细）。
3>js程序需要一个入口，一般是Application.js（有的也是app.js）。
第一步：创建入口页面
创建一个html页面，我们使用mvc.html页面，在这个页面的同一个目录，我们创建一个app的文件夹，在这个文件夹下面用来放置js代码。mvc.html就是我们的程序宿主页面。
第二步：创建目录结构
在app文件夹下面创建controller、model、store和view文件夹，从名称上就知道他们该放置什么代码了吧。然后创建Application.js作为我们程序的入口文件，并在mvc.html中引用Application.js文件。
第三步：创建controller
controller作为连接model、store和view的桥梁，在mvc开发模式中起到了至关重要的作用。如果说model定义了数据模式、store提供了数据存取的方法、view用来展示数据，那么controller将用来控制具体的数据操作。
Ext.define('MyApp.controller.User', {
extend: 'Ext.app.Controller',
stores: ['User'],
models: ['User'],
views: ['Viewport', 'user.List', 'user.Edit'],
init: function () {
this.control({
'userlist': {
itemdblclick: this.editUser
},
'useredit button[action=save]': {
click: this.saveUser
}
});
},
editUser: function (grid, record) {
var win = Ext.widget("useredit");
win.down("form").loadRecord(record);
win.show();
},
saveUser: function (btn) {
var win = btn.up("window"),
form = win.down("form"),
record = form.getRecord();
form.updateRecord();
record.commit();
win.close();
}
});
我们来详细的说一下controller的这段代码。在这段代码中：
- 将定义好的model、store、view作为配置项添加到controller中，controller会加载这些文件；
- 在init方法中为view添加响应事件（这里添加事件的方法是通过query方式获取控件并添加的，这也是为什么要为view添加alias的原因）
- editUser方法和saveUser方法则是具体的操作内容
有了这些步骤，我们就将model、store、view联系在一起了。然后，我们进入Application.js文件中，完善我们的入口页面。
第四步：创建model
这个文件将存放我们的model，我们可以直接把最上面定义model的代码赋值到这里面。
app/model/User.js 的代码如下：
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'phone', type: 'string' }
]
});
第五步：创建store
虽然store不是mvc中必须的步骤，但是作为数据仓库，store起到了数据存取的作用，grid、form等展现的数据都是通过store来提供的，因此store在extjs mvc开发模式中是必不可少的。
Ext.define("MyApp.store.User", {
extend: "Ext.data.Store",
model: "MyApp.model.User",
data: [
{ name: "Tom", age: 5, phone: "123456" },
{ name: "Jerry", age: 3, phone: "654321" }
]
});
第六步：创建view
为了实现列表和编辑功能，我们需要两个视图，分别是list和edit，那么view的结构如下：
app/view/user/List.js 对应我们的grid的定义，只不过将创建grid的实例改成了创建grid的扩展。
app/view/user/List.js 代码如下：
Ext.define("MyApp.view.user.List", {
extend: "Ext.grid.Panel",
alias: 'widget.userlist',
store: "User",
initComponent: function () {
this.columns = [
{ text: '姓名', dataIndex: 'name' },
{ text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0'},
{ text: '电话', dataIndex: 'phone' }
];
this.callParent(arguments);
}
});
app/view/user/edit.js 对应我们的window的定义，但同样是通过扩展的形式来实现的。
app/view/user/edit.js 代码如下：
Ext.define("MyApp.view.user.Edit", {
extend: "Ext.window.Window",
alias: "widget.useredit",
title: "编辑用户",
width: 300,
height: 200,
layout: "fit",
items: {
xtype: "form",
margin: 5,
border: false,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 60
},
items: [
{ xtype: "textfield", name: "name", fieldLabel: "姓名" },
{ xtype: "numberfield", name: "age", fieldLabel: "年龄" },
{ xtype: "textfield", name: "phone", fieldLabel: "电话" }
]
},
buttons: [
{ text: "保存", action: "save" }
]
});
注意：对于view类的创建，我们需要定义alias，这是为了方便我们通过xtype来创建该组件的实例。（如果没有alias，我们将很难在viewport和controller中使用）
第七步：完善Application.js文件
Ext.application({
name: "MyApp",
appFolder: 'app',
controllers: ["User"],
autoCreateViewport: true,
launch: function () {
// 页面加载完成之后执行
}
});
在很多时候，Application.js文件也被简单的命名为app.js，它们的作用是一样的，为应用程序提供一个入口。它可以很简单，我们的Application.js文件代码如上，
- name: 应用程序名称
- appFolder: 应用程序代码的目录，用来进行动态加载代码的
- controllers: 应用程序使用到的控制器
- autoCreateViewport: 是否自动创建Viewport，默认为false，我们这里设置为true，当它被设置为true的时候，应用程序会自动创建Viewport，这个Viewport的定义在我们的app/view/viewport.js 中；如果为false的时候，我们需要在launch中手动创建相应的视图。
第八步：Viewport.js的定义
Viewport作为我们应用程序的视图面板，可以被单独的定义在一个Viewport.js文件中。它的定义也很简单，通常用来将一个或多个view作为它的子控件。
app/view/viewport.js 代码如下：
Ext.define("MyApp.view.Viewport", {
extend: "Ext.container.Viewport",
layout: "fit",
items: {
xtype:"userlist"
}
});
这些都完成之后运行mvc.html来查看效果
Extjs MVC开发模式为我们提供了一个完善的代码组织和维护的方向，它的出发点是好的，但是在实际的操作过程中，我们会发现这种模式过于繁琐，这可能是由于我们的示例太过于简单而造成的。
Extjs MVC的Model、Store、View、Controller各层的代码都是通过Ext.define来创建类的形式完成的，因此在使用Extjs MVC之前，我们需要对Extjs的类系统有一定的认识，包括如何使用Ext.define自定义类。
对于View层的控件，我们需要为它们指定一个alias属性，方便通过xtype创建对象，并可以在Controller中方便的找到他，为它的子控件添加具体的操作。
ext.js的mvc开发模式详解的更多相关文章
- Extjs MVC开发模式详解
Extjs MVC开发模式详解 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式, ...
- MVC开发模式详解
转自:https://blog.csdn.net/qq_33991989/article/details/78966071 MVC设计模式详解 1.Model-View-Controller(模型-视 ...
- 03.Django的MTV开发模式详解和模型关系构建
ORM:对象关系映射 一:MTV开发模式把数据存取逻辑.业务逻辑和表现逻辑组合在一起的概念有时被称为软件架构的 Model-View-Controller(MVC)模式. 在这个模式中,Model 代 ...
- JAVA 23种开发模式详解（代码举例）
设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
- ext.js的mvc
1.Ext.js的mvc开发模式 在ext.js4.0以后引入mvc开发模式,将js分成model-view-controller三层,使得大量js代码变得更加易于维护和重用,这就是ext.jsmvc ...
- 【转】EXT JS MVC开发模式
原文链接:EXT JS MVC开发模式 在app(亦即根目录)文件夹下面创建controller.model.store和view文件夹,从名称上就知道他们该放置什么代码了吧.然后创建Applicat ...
- 《Node.js开发实战详解》学习笔记
<Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集
在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...
- 当里个当，免费的HTML5连载来了《HTML5网页开发实例详解》连载（一）
读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...
随机推荐
- myBase7 激活方法
一.引言: 之前使用过一段时间的myBase,那时候发现还不太美观,所以弃用了一段时间,最近看到有myBase7出来,使用了一下感觉还可以,但是只能试用一个月,不过还好找到了破解的方法. 二.破解步骤 ...
- Visual Studio 2017 - Windows应用程序打包成exe文件（2）- Advanced Installer 关于Newtonsoft.Json，LINQ to JSON的一个小demo mysql循环插入数据、生成随机数及CONCAT函数 .NET记录-获取外网IP以及判断该IP是属于网通还是电信 Guid的生成和数据修整（去除空格和小写字符）
Visual Studio 2017 - Windows应用程序打包成exe文件(2)- Advanced Installer Advanced Installer :Free for 30 da ...
- Unity应用架构设计(4)——设计可复用的SubView和SubViewModel(Part 1)
『可复用』这个词相信大家都熟悉,通过『可复用』的组件,可以大大提高软件开发效率. 值得注意的事,当我们设计一个可复用的面向对象组件时,需要保证其独立性,也就是我们熟知的『高内聚,低耦合』原则. 组件化 ...
- Git Flow 分支管理简述
概述 Git 是什么 Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的 ...
- [C++]“error C2712: 无法在要求对象展开的函数中使用__try”解决方案
https://blog.csdn.net/shiqw5696/article/details/80664749 前段时间写了一篇关于C++异常捕获及异常处理的文章:c++异常捕获及异常处理try-t ...
- 什么是SPU、SKU、ARPU
这是一篇存档性笔记,我自己存档一下对这3个词的理解.如果你已经明了了这3个词的意思,请直接忽略之 首先,搞清楚商品与单品的区别.例如,iphone是一个单品,但是在淘宝上当很多商家同时出售这个产品的时 ...
- odoo：开源 ERP/CRM 入门与实践 -- 上海嘉冰信息技术公司提供咨询服务
odoo:开源 ERP/CRM 入门与实践 看了这张图,或许你对odoo有了一些兴趣. 这次Chat就是和大家一起交流开源ERP/CRM系统:odoo 对以下读者有帮助:研发.产品.项目.市场.服务. ...
- 本人SW知识体系导航 - Programming menu
将感悟心得记于此,重启程序员模式. js, py, c++, java, php 融汇之全栈系列 [Full-stack] 快速上手开发 - React [Full-stack] 状态管理技巧 - R ...
- 常见机试题分析Java版
1. 操作系统任务分为系统任务和用户任务两种.其中,系统任务的优先级<50,用户任务的优先级>=50且<=255.优先级大于255的为非法任务,应予以剔除.现有一任务队列task[] ...
- Essay3.0发布，基于JavaScript的前后端同构博客系统
前言 转眼间距离我开源这个项目已经两年了,最初是奔着学习的目的开发了这个项目,后来一直记录自己的学习笔记.随着时间的增长,发现之前写的代码简直不忍直视,于是就有了重构的想法.这个过程有些漫长,竟然用了 ...