ExtJS学习：MVC模式案例

最新推荐文章于 2019-08-13 10:04:54 发布
最新推荐文章于 2019-08-13 10:04:54 发布
阅读量5.4k 收藏 3
点赞数 2
分类专栏： ExtJS 文章标签： MVC ExtJs

MVC模式案例（一）


实现效果：
MVC模式实现的ExtJS案例
      由上图可知，网页的布局有三部分组成：顶部标题、左侧菜单和右侧主题内容显示。这里我们对案例的布局有个初步印象，方便今后我们的进一步学习。
      了解了项目的最终效果，下面来看一下该案例最终的文件结构：
ExtJS案例：文件结构图
      有文件结构可以看出，在整个项目中，app文件夹是我们的主要工作目录，其中包含：controller（控制器）、model（数据模型）、store（数据集）、view（视图）。另外还有server文件夹，其主要目的是代替后台服务器为项目提供数据。这些内容我们将在今后的文章中逐步讲解，今天我们来看一下index.html和app.js这两个文件。
index.html文件代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ExtJS学习：MVC模式案例</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../extjs/examples/shared/example.css" />
<script type="text/javascript" src="../extjs/bootstrap.js"></script>
<script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<iframe id='contentIframe' name='contentIframe' style='height:100%;width:100%' frameborder="no"></iframe>
</body>
</html>

这个文件主要的目的就是对ExtJS框架文件的引用，这里我们不做过多的介绍。
app.js文件代码：

Ext.onReady(function(){
	//开启悬浮提示功能
	Ext.QuickTips.init();
	//开启动态加载
	Ext.Loader.setConfig({
		enabled: true
	});
	//创建应用程序的实例
	Ext.application({
		//设定命名空间
		name: 'Demo',
		//指定配置选项，设置相应的路径
		appFolder: 'app',
		//加载控制器
		controllers: ['demoController'],
		//自动加载和实例化Viewport文件
		autoCreateViewport: true
	});
});

      app.js文件可以看成是对我们整个项目的全局设置，其中我们需要注意的有：
      （1）Ext.Loader.setConfig帮我们开启了自动加载的功能，这个功能默认是不开启的，需要我们手动开启，否则以后开发的很多文件都会找不到，报以下错误：
自动加载未开启报错信息
      （2）name: ‘Demo’给项目规定了一个命名空间，它将作为一个全局变量应用于整个项目中，帮助我们识别属于本项目的应用文件。
      （3）appFolder: ‘app’这个配置项，帮我们指定到app文件夹中。

MVC模式案例（二）

ExtjS框架怎么使用MVC模式对代码进行布局。
      到目前为止我们现有的文件只有根目录下的index.html和app.js两个文件，不具有任何的实际意义。下面我们开始着手创建我们的项目，让它能够实实在在的展现在我们的浏览器中。首先，我们在根目录下创建app文件夹，然后在app文件夹下创建controller和view两个文件夹，分别存放我们的控制器文件和视图文件。

定义ViewPort

      VeiwPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。下面我们在view文件夹中创建Viewport.js文件，然后添加如下代码：

Ext.define('Demo.view.Viewport', {
	extend: 'Ext.container.Viewport',
	//布局方式：border
	layout: 'border',
	items: [{
		title:'ExtJS案例',
		collapisble: true,
		region:'north',
		height: 100,
		html: '<br><center><font size=5>MVC模式实现的ExtJS案例</font><br><font size=2>源码来源:ITLee博客</font></center>'
	},{
		title: '功能菜单',
		region: 'west',
		width: 180,
		split: true,
		collapisble: true,
		html:'这里是菜单部分'
	}, {
		id: 'mainContent',
		title: '主题内容显示',
		layout: 'fit',
		region: 'center',
		collapisble: true,
		contentEl: 'contentIframe'
	}]
});

      在Viewport中我们用border的布局方式将整个网页分为三个部分：头部（north）、左部（west)、主题部分（center）。

定义一个控制器

      控制器是整个应用程序的关键，他负责监听事件，并对某些时间做出相应的动作。现在我们在controller文件夹下创建一个控制器，命名为demoController.js（这里的命名应该与app.js文件中加载的控制器名称相同），然后我们为该文件添加以下代码：

Ext.define('Demo.controller.demoController', {
	extend: 'Ext.app.Controller',
        //将Viewport.js添加到控制器
	views: ['Viewport']
});

      在控制器中我们通过views配置项，将所需视图加载到控制器中。现在我们通过浏览器就可以对项目进行查看了，查看效果如下：
ExtJS案例布局效果图
      至此，我们对网页的布局就算是完成了，希望对大家有所帮助。下一讲我们将讲解树形菜单的实现。

MVC模式案例（三）

到目前为止，我们的文件结构如下图：
ExtJS案例文件结构图
      接下来，我们在view文件夹中添加一个mentTree.js文件，用来作为树形菜单组件。为该文件添加以下代码：

Ext.define('Demo.view.menuTree', {
	extend: 'Ext.tree.Panel',
	alias: 'widget.menutree',
	border: false,
	//规定锚链接地址的显示区域
	hrefTarget: 'mainContent',
	//是否显示根节点
	rootVisible: false,
	//数据集
	store: 'menuStore',
	//菜单样式
	bodyStyle: {
		background: '#ffc',
		padding: '10px'
	}
});

      这样我们就创建了一个菜单的组件，但是，现在我们的菜单还不能正常工作，因为菜单中还没有填充数据。ExtJS4中我们用单独的一个文件来创建数据模型和数据集，在创建数据集前我们首先创建数据模型。在app文件夹下创建model文件夹，并且在该文件夹下创建menuModel.js文件，为该文件添加以下代码：

Ext.define('Demo.model.menuModel', {
    extend: 'Ext.data.Model',
    fields:[
        {name:'id', type:'int'},
        {name:'pid', type:'int'},
        {name:'text', type:'varchar'},
        //type为布尔型时，后面的默认值是必须写的，要不会出错
        {name:'leaf', type:'boolean', defaultValue: true},
        {name: 'url', type:'varchar'}
    ]
});

      有了数据模型，接下来我们创建store文件夹，以及在该文件夹下创建menuStore.js文件，添加下面的代码：

Ext.define("Demo.store.menuStore",{
	extend:'Ext.data.TreeStore',
	defaultRoodId:'root',
	requires: 'Demo.model.menuModel',
	model: 'Demo.model.menuModel',
	proxy:{
		type:'ajax',
		url:'./server/data.json',
		reader:'json',
		autoLoad:true
	}
});

      数据集和数据模型都有了，那么我们怎么给菜单添加数据呢？一般情况下，菜单所需的数据都是有后台服务器提供，因为我们这里主要讲解ExtJS的知识，尽量不去涉及后端的东西，我们可以用json格式模拟后台数据输出。现在，我们在根目录下创建server文件夹，在该文件夹下创建一个data.json的文件用来为前端提供数据：

[
	{"id":"2",
	"pid":"1",
	"text":"用户管理",
	"leaf":"0",
	"url":"http:\/\/www.lihuai.net",
	"children":[{
		"id":"5",
		"pid":"2",
		"text":"基本信息",
		"leaf":"1",
		"url":"http:\/\/www.sogou.com",
		"children":""},{
		"id":"11",
		"pid":"2",
		"text":"信息管理",
		"leaf":"1",
		"url":"http:\/\/www.sogou.com",
		"children":""},{
		"id":"12",
		"pid":"2",
		"text":"添加用户",
		"leaf":"1",
		"url":"http:\/\/www.sogou.com",
		"children":""}]},
	{"id":"3",
	"pid":"1",
	"text":"产品管理",
	"leaf":"0",
	"url":"http:\/\/www.so.com",
	"children":[{
		"id":"7",
		"pid":"3",
		"text":"产品信息",
		"leaf":"1",
		"url":"http:\/\/www.so.com",
		"children":""},{
		"id":"8",
		"pid":"3",
		"text":"产品添加",
		"leaf":"1",
		"url":"http:\/\/www.so.com",
		"children":""}]}
]

      为了简单起见，每个节点的url地址我们用简单的网页替代。万事俱备，只差加载了。那么，怎么才能将我们写好的菜单组件加载到我们的项目中呢？
      首先，修改我们的Viewport.js文件，将菜单组件添加到整个视图中，修改后的代码如下：

Ext.define('Demo.view.Viewport', {
	extend: 'Ext.container.Viewport',
	//布局方式
	layout: 'border',
	items: [{
		title:'ExtJS案例',
		collapisble: true,
		region:'north',
		height: 100,
		html: '<br><center><font size=5>MVC模式实现的ExtJS案例</font><br><font size=2>源码来源:ITLee博客</font></center>'
	},{
		title: '功能菜单',
		region: 'west',
		width: 180,
		split: true,
		collapisble: true,
                //这里是修改的部分
		items:[{
			xtype: 'menutree'
		}]
	}, {
		id: 'mainContent',
		title: '主题内容显示',
		layout: 'fit',
		region: 'center',
		collapisble: true,
		contentEl: 'contentIframe'
	}]
});

      接下来，修改demoController.js文件，实现对菜单组件的加载，修改后的代码：

Ext.define('Demo.controller.demoController', {
	extend: 'Ext.app.Controller',
	views: ['Viewport','menuTree'],
	stores: ['menuStore'],
	model: ['menuModel']
});

      现在，用浏览器查看我们的案例，左侧已经显示出菜单栏了，效果如下图：
Extjs mvc案例效果图
      当我们点击树形节点的时候，发现右侧主题部分并没有显示网页内容，这是因为我们还没有为节点添加监听事件的原因。具体如何添加切换页面的效果，下一讲我们将会详细讲解。

MVC模式案例（四）

我们基本实现了MVC模式布局ExtJS项目的目的，并且在浏览器中也可以看到最为常见的网页布局结构。但是，作为WEB开发者，并不是能够实现网页布局就算是完成任务了，我们还需要实现一定的功能。在这一讲中，我们将实现当点击ExtJS菜单节点的时候，网页主题部分显示相对应的内容。
      到目前为止，我们的文件结构：
ExtJS MVC模式案例
      本讲我们不会添加新的文件，只是对原来的文件进行修改即可。前面我们说过，控制器的主要作用是监听事件，控制逻辑。所以，我们今天主要修改demoController.js这个文件，为我们的项目添加切换页面的功能。目前我们demoController.js文件的代码为：

1 Ext.define('Demo.controller.demoController', {
2     extend:'Ext.app.Controller',
3     views: ['Viewport','menuTree'],
4     stores: ['menuStore'],
5     model: ['menuModel']
6 });

      首先我们需要对menuTree组件的鼠标点击事件进行监听，修改后的代码：

1 Ext.define('Demo.controller.demoController', {
2     extend:'Ext.app.Controller',
3     views: ['Viewport','menuTree'],
4     stores: ['menuStore'],
5     model: ['menuModel'],
6     //通过init函数来监听视图事件，控制视图与控制器的交互
7     init:function() {
8         //init函数通过this.control来负责监听
9         this.control({
10                         //被监听的组件的别名
11             'menutree': {
12                 //监听鼠标点击事件，点击后调用changePage方法
13                 itemclick:this.changePage,
14             }
15         });
16     },
17     changePage:function(){
18         alert('success');
19     }
20 });

      刷新页面，点击菜单几点，弹出success说明我们监听事件成功。下面我们继续修改changePage方法，实现对主体内容部分页面的切换功能。demoController.js代码如下：

1 Ext.define('Demo.controller.demoController', {
2     extend:'Ext.app.Controller',
3     views: ['Viewport','menuTree'],
4     stores: ['menuStore'],
5     model: ['menuModel'],
6     //通过init函数来监听视图事件，控制视图与控制器的交互
7     init:function() {
8         //init函数通过this.control来负责监听
9         this.control({
10             //被监听的组件的别名
11             'menutree': {
12                 //监听鼠标点击事件，点击后调用changePage方法
13                 itemclick:this.changePage,
14             }
15         });
16     },
17     changePage:function(view, rec, item, index, e){
18         //获取url地址
19         var url = rec.get('url');
20         //获取当前节点信息
21         var title = rec.get('text');
22         //将主体内容部分的url地址指定为我们获取到的url
23         Ext.getDom('contentIframe').src = url;
24         //将主体内容框的标题设置为我们获取的节点信息
25         Ext.getCmp('mainContent').setTitle(title);
26     }
27 });

      通过对changePage方法的修改，刷新页面，当我们再次点击节点的时候，右侧主体内容部分将显示对应url的页面信息，大功告成。

MVC模式案例（五）

 要实现右键菜单的功能，首先我们需要添加一个菜单组件，在view文件夹中新建contextMenu.js文件，该文件中添加以下代码：

Ext.define('Demo.view.contextMenu', {
	extend: 'Ext.menu.Menu',
	alias: 'widget.contextmenu',
	float: true,
	items: [{
		xtype: 'button',
		text: '添加',
		action: 'add',
		iconCls: 'leaf'
	}, {
		xtype: 'button',
		text: '删除',
		action: 'del',
		iconCls: 'leaf'
	}, {
		xtype: 'button',
		text: '编辑',
		action: 'edit',
		iconCls: 'leaf'
	}]
});

      正如我们前面所说的，添加组件后需要在控制器中进行加载，否则ExtJS的自动加载机制将不能找到我们的文件，下面修改demoController.js文件的view配置项，修改后的代码如下：

Ext.define('Demo.controller.demoController', {
	extend: 'Ext.app.Controller',
        //这次的修改在这里，给view配置项添加“contextMenu”
	views: ['Viewport','menuTree','contextMenu'],
	stores: ['menuStore'],
	model: ['menuModel'],
	//通过init函数来监听视图事件，控制视图与控制器的交互
	init: function() {
		//init函数通过this.control来负责监听
		this.control({
			//被监听的组件的别名
			'menutree': {
				//监听鼠标点击事件，点击后调用changePage方法
				itemclick: this.changePage,
			}
		});
	},
	changePage:function(view, rec, item, index, e){
		//获取url地址
		var url = rec.get('url');
		//获取当前节点信息
		var title = rec.get('text');
		//将主体内容部分的url地址指定为我们获取到的url
		Ext.getDom('contentIframe').src = url;
		//将主体内容框的标题设置为我们获取的节点信息
		Ext.getCmp('mainContent').setTitle(title);
	}
});

      做完以上工作后，接下来就是为我们的menuTree组件添加右键监听事件了，修改控制器文件demoController.js：

Ext.define('Demo.controller.demoController', {
	extend: 'Ext.app.Controller',
	views: ['Viewport','menuTree','contextMenu'],
	stores: ['menuStore'],
	model: ['menuModel'],
	//通过init函数来监听视图事件，控制视图与控制器的交互
	init: function() {
		//init函数通过this.control来负责监听
		this.control({
			//被监听的组件的别名
			'menutree': {
				//监听鼠标点击事件，点击后调用changePage方法
				itemclick: this.changePage,
				//监听鼠标右键事件，点击后调用contextMenu方法
				itemcontextmenu: this.contextMenu
			}
		});
	},
	//页面切换方法
	changePage:function(view, rec, item, index, e){
		//获取url地址
		var url = rec.get('url');
		//获取当前节点信息
		var title = rec.get('text');
		//将主体内容部分的url地址指定为我们获取到的url
		Ext.getDom('contentIframe').src = url;
		//将主体内容框的标题设置为我们获取的节点信息
		Ext.getCmp('mainContent').setTitle(title);
	},
	//显示右键菜单方法
	contextMenu:function(tree, record, item, index, e, eOpts){
		//阻止浏览器默认右键事件
		e.preventDefault();
		e.stopEvent();
		//显示右键菜单
		var view = Ext.widget('contextmenu');
		view.showAt(e.getXY());
	}

});

      在demoController.js文件中添加以上代码后，刷新页面，在菜单节点上点击右键，看到如下效果图：
ExtJS mvc模式案例图
      现在，我们整个案例教程就结束了，虽然还有很多功能没实现，如果继续扩展的话，怕是永远也讲不完了，呵呵，主要目的还是为ExtJS的新手们起一个引导的作用，希望对大家有所帮助。


原文地址：http://www.lihuai.net/qianduan/extjs/457.html


http://www.qeefee.com/extjs-course-3-define-classes




萝卜耳朵
关注
专栏目录
ExtJS MVC 案例实践（一）
踏 浪的博客
06-18 657
参考自：https://blog.csdn.net/luckypeng/article/details/43151793 介绍： 使用ExtJS MVC构建出如下图框架。 ps： 此实验是接着"ExtJS MVC框架搭建（三）" 教程后面做的， 所以主页为 index2.html, JS文件为 app2.js 一、自定义一个viewport组件 新建 app/view/Viewp...
ExtJS4的MVC模式实例
奋斗吧。
05-09 4307
MVC模式， 想必大家都很清楚。  Model  -  View - Controller。 ExtJS在4.0以后也开始引入了MVC模式， 程序的结构也就变得规范。 开发者可以利用MVC的设计模式规划了开发流程。 下面的一个MVC模式的小例子。 在demo文件夹里就是ExtJS的MVC架构。 先来看界面。 dem
Extjs MVC开发模式
陈先森的程序人生
05-28 372
本文转载于http://www.cnblogs.com/youring2/p/3979777.html 假设你从来没有接触过Extjs MVC开发模式，但是你知道ASP.NET MVC、或者别的任何语言下的MVC开发模式，那么我们来试想一下Extjs下的MVC该是什么样子？ JS是需要在html页面中运行的，所以它要有一个宿主页面 它要有Model、View和Controll
最简单的ExtJS4的MVC实例
web开发
08-11 204
最简单的ExtJS4的MVC实例 从ExtJS4.0开始，ExtJS支持MVC架构，让前端开发者更好的实现数据与逻辑分离，使用 View, Controller, Model组件定义来完成浏览器前端业务。提高代码可以维护性。ExtJS中 的View是被动模式，被Controller持有。 一个最简单的基于ExtJS4的MVC的App实例，有Contoller， V...
Extjs 4 MVC Demo 示例
11-02
原本是打算采用EXTJS4 的MVC做应用框架，已完成左侧树菜单、tabpanel（内嵌Grid，带查询及分页功能） 但是由于网络上的相关文章太少，公司对这个框架提出疑问，以后会不会遇到问题，所以改用ext3了...唉
ExtJS4.1实现的mvc模式经典入门案例
03-02
总结，本案例"ExtJS4.1实现的mvc模式经典入门案例"旨在帮助新手理解如何在ExtJS中使用MVC模式构建应用。通过模型管理数据，视图展示数据，控制器处理用户交互，以及存储与服务器通信，开发者可以构建出复杂且易于...
ExtJS4 treepanel与girdpanel简单案例（包括MVC模式与非MVC模式）
01-21
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式：需要在引入js文件夹中的main.js文件 mvc开发模式：需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
经典的入门级Ext MVC模式案例
06-22
ExtJS是一个强大的JavaScript库，主要用于构建富客户端应用。...通过深入学习和实践这个入门级的Ext MVC模式案例，新手能够建立起坚实的基础，为进一步探索ExtJS的高级特性和构建复杂的企业级应用做好准备。
ExtJS MVC入门级开发案例
11-20
学习这个案例，你应该能够了解如何组织和构建一个基于ExtJS 4的MVC应用。这将帮助你掌握数据管理、用户交互和应用程序结构设计的核心技能，为进一步的ExtJS开发打下坚实基础。实践过程中，你可以逐步分析每个文件的...
Ext MVC模式开发
01-07 137
ExtjsMVC模式前台组织结构 转载于:https://my.oschina.net/yunsy/blog/598757
Extjs6.0开发之mvvm与mvc的使用案例
08-08
附件是我实际开发的一个模块,因为比较简单，思路比较清楚，所以分享出来给大家。本模块采用的是Extjs6.0的开发技术，使用过extjs的朋友都知道，从Extjs5.0版本开始引入的新的开发模式，这种模式更清楚，更易理解，所以作为入门，大家不妨下载下来看看。 ps：本模块共有3个模块，其中两个模块采用mvc，一个采用mvvm （因为觉得麻烦，所以model层没有划分很细，不过我个人比较喜欢这种开发方式，主要看controll和view model的设计思路）。
ExtJS的MVC模式
05-09
ExtJS4.0.7的MVC模式。 欢迎大家下载。
EXT JS4 mvc模式及实例
loveforever89的专栏
05-10 2695
有许多MVC体系结构，其中大多数都是彼此略有不同。这是EXT JS4中的。     模型：字段和数据的集合。模型知道如何通过数据包存储，能通过协议连接到其他模型。     视图：任何类型的组件——网格、树和面板是所有视图。　　　　     控制器：存放所有使应用程序工作的代码的地方——不管是渲染的视图，实例化模型，或任何其他应用程序逻辑。 一、文件结构 EXT JS4中应用遵循统一的
extjs mvc 完整demo
程序员记事本
03-13 162
完整的extjs mvc demo代码，留作备份。
MVC案例-架构分析
weixin_34387284的博客
07-02 227
MVC案例 ——没有业务层，直接由Servlet调用DAO，所以也没有事务操作。所以可以在DAO中直接获取Connection对象 ——采取MVC设计模式 ——使用到的技术 MVC设计模式：JSP，Servlet，POJO 数据库使用MysSQL 连接数据库需要使用C3P0数据库连接池 JDBC工具采用DBUtils 页面上的提示操作使用jQuery ——技术难度： ...
一个ExtJs的最基本的mvc模式示例
weixin_34195546的博客
03-21 88
　　初学ExtJs，各种纠结。在网上看到过跟本例很类似的博文。但是不甚明了。 　　一来我在学习中感觉不太熟练，体会到“半吊子”的难处，做个笔记，二来相应技术圈“分享时一种美德”的口号。为之后学习ExtJs 4.0及之后版本的朋友们能快速入门，本人贴出第一个用ExtJs 完成的示例。借鉴借鉴。 　　ExtJs,使用原生的js，结合OO的思想，减轻了server的压力，成就了RIA。当前类似的有a...
Extjs 6 MVC开发模式（一）
weixin_30466039的博客
12-06 120
1、Extjs就绪函数 1）导入Extjs的CSS <link rel="stylesheet" type="text/css" href="resources/theme-neptune-all_1.css"> <link rel="stylesheet" type="text/css" href="resources/theme-neptune-all_2...
mvc案例
tangshang1234的专栏
11-16 251
String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> "> My JSP 'registte
MVC案例
weixin_44261821的博客
08-13 108
前端页面（login.jsp） <%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/8/12 Time: 15:39 To change this template use File | Settings | File Templates. --%> <%@ page content...
Extjs4.0学习全攻略：环境搭建与实战案例
3. **系统类与MVC模式**：文章介绍了Extjs中的系统类和模型-视图-控制器（Model-View-Controller，MVC）架构，这有助于组织代码和提高代码的可维护性。通过实际案例，学习者能掌握如何利用这些设计模式进行开发。 4...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值