ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合八:ExtJS及其MVC
2013-05-15 13:33
288 查看
这篇文章写的有些晚,本打算5.1写2篇,遇到很多需要办的事,实在抱歉。
之前一直在自己的笔记本上开发,本子用的太老了,天气稍微一热键盘都烫手。5.1假期,组装了个台式机,现在用着舒服多了。
昨天转移这个项目时,遇到了个问题,就是EF框架生成的edmx报错,肯定是没有安装SQLite驱动,于是到官方找了个64位的系统,蛋疼的事情发生了,不能安装。今天报着试一试的心里,装了个32位,竟然通过的,多了份无奈。
ExtJS给我的感觉是开发效率不高,从代码编写、调试都能反应出来,不过在ExtJS4.0引入MVC模式以后好了很多,因为很多代码都是分开写的,比如在“用户管理”模块中,可能涉及到操作:显示用户列表、添加用户和修改用户,在4.0以前只能把这三个视图写在一个页面中:用户列表一般是一个grid;添加和修改视图一般是window,里面嵌个form。这样,同一个页面中含有大量的代码,在开发和维护时,找到一行代码并不那么方便。但在ExtJS4.0以后,列表、添加、修改就可以分别放到三个js中,在控制器中就可以轻易的处理这些视图。
由于ExtJS与后台数据的访问都是通过ajax异步访问的,也就是无刷新的交互,所以,ExtJS仅需要一个“入口”处,这个入口文件就是 app.js,app中定义了整个项目所需要的controller,每个控制器负责自己的业务逻辑处理,包括交互界面(视图)。
下面转入正题,这篇准备讲些ExtJS基础的东西,然后发布个简单的 ExtJS DEMO。
![](http://img.blog.csdn.net/20130515131415169)
如果你用过其他的MVC框架,再看ExtJS的mvc并不难。上图中ExtJS目录处于Web项目的根目;/ExtJS/4.1 中存放的是extjs框架文件;Manage是后台管理的命名空间,相当于ASP.NET MVC中的一个Area,其中有一个目录app,存放所有的js脚本,app.js可以认为是入口引导文件。app目录中的结构如下:
controller:存放所有控制器,和其他的mvc框架类似;
model:存放model类文件,MVC中的Model本身是一种充血模型,但我个人的理解,在ExtJS中是贫血的,简单的说就是仅有属性,没有方法,可以这么理解;
view:就是存放视图的目录,与以前的版本相比,不同的用户界面可以定义多个视图,可以在控制器中很容易的调用这些视图;
store:存储器,extjs提供了很多类型的store用于处理array、json、xml等格式的数据;
proxy:代理是store与数据库之间的“通道”,store要想操作数据必须通过proxy,针对不同的数据源,extjs提供了多种代理,并向store提供CRUD操作的接口;
utility:常用类的封装。
如果要和.NET中的对象做个对比的话,我认为Proxy类似于DbConnection,用于操作数据,Store类似于DataSet,用于存储数据,而model就是DataRow了。
![](http://img.blog.csdn.net/20130515131507340)
这个DEMO中涉及到两个数据:左边的菜单和右边的列表,我分别定义为Menu和Role。由于js脚本文件太多,我就不一一列举,仅把主要的几个js说明下:
其他的文件请看下源代码,明白一个模块的,其他的都类似,如果还不清楚可以看本人其他的文章,链接:/article/8413221.html
本篇DEMO地址:http://download.csdn.net/detail/xz2001/5381233
注:仅是ExtJS部分DEMO
之前一直在自己的笔记本上开发,本子用的太老了,天气稍微一热键盘都烫手。5.1假期,组装了个台式机,现在用着舒服多了。
昨天转移这个项目时,遇到了个问题,就是EF框架生成的edmx报错,肯定是没有安装SQLite驱动,于是到官方找了个64位的系统,蛋疼的事情发生了,不能安装。今天报着试一试的心里,装了个32位,竟然通过的,多了份无奈。
ExtJS给我的感觉是开发效率不高,从代码编写、调试都能反应出来,不过在ExtJS4.0引入MVC模式以后好了很多,因为很多代码都是分开写的,比如在“用户管理”模块中,可能涉及到操作:显示用户列表、添加用户和修改用户,在4.0以前只能把这三个视图写在一个页面中:用户列表一般是一个grid;添加和修改视图一般是window,里面嵌个form。这样,同一个页面中含有大量的代码,在开发和维护时,找到一行代码并不那么方便。但在ExtJS4.0以后,列表、添加、修改就可以分别放到三个js中,在控制器中就可以轻易的处理这些视图。
由于ExtJS与后台数据的访问都是通过ajax异步访问的,也就是无刷新的交互,所以,ExtJS仅需要一个“入口”处,这个入口文件就是 app.js,app中定义了整个项目所需要的controller,每个控制器负责自己的业务逻辑处理,包括交互界面(视图)。
下面转入正题,这篇准备讲些ExtJS基础的东西,然后发布个简单的 ExtJS DEMO。
1 ExtJS4.x中使用MVC开发的目录结构
先看下我的目录结构:如果你用过其他的MVC框架,再看ExtJS的mvc并不难。上图中ExtJS目录处于Web项目的根目;/ExtJS/4.1 中存放的是extjs框架文件;Manage是后台管理的命名空间,相当于ASP.NET MVC中的一个Area,其中有一个目录app,存放所有的js脚本,app.js可以认为是入口引导文件。app目录中的结构如下:
controller:存放所有控制器,和其他的mvc框架类似;
model:存放model类文件,MVC中的Model本身是一种充血模型,但我个人的理解,在ExtJS中是贫血的,简单的说就是仅有属性,没有方法,可以这么理解;
view:就是存放视图的目录,与以前的版本相比,不同的用户界面可以定义多个视图,可以在控制器中很容易的调用这些视图;
store:存储器,extjs提供了很多类型的store用于处理array、json、xml等格式的数据;
proxy:代理是store与数据库之间的“通道”,store要想操作数据必须通过proxy,针对不同的数据源,extjs提供了多种代理,并向store提供CRUD操作的接口;
utility:常用类的封装。
如果要和.NET中的对象做个对比的话,我认为Proxy类似于DbConnection,用于操作数据,Store类似于DataSet,用于存储数据,而model就是DataRow了。
2 简单的DEMO
先把这个DEMO的图给贴出来:这个DEMO中涉及到两个数据:左边的菜单和右边的列表,我分别定义为Menu和Role。由于js脚本文件太多,我就不一一列举,仅把主要的几个js说明下:
2.1 app/app.js
Ext.config = { root : '/ExtJS/Manage/' }; Ext.application({ name: 'Manage', appFolder: Ext.config.root + 'app',//定义模块位置 controllers: [//声明用到的两个控制器,如果有很多,需要逐一列出 'Menu', 'Role' ], requires: [ 'Manage.utility.Format',//必须的类文件,这里我自己封装的 'Manage.utility.Const' ], autoCreateViewport: true//自动创建Viewport布局,需要在View目录中存在才行 });
2.2 app/controller/menu.js
这里我只举个menu的例子,role的可以对照看下代码:Ext.define('Manage.controller.Menu', { extend: 'Ext.app.Controller',//从控制器基类继承 stores: ['Menu'],//用到的Store对象 views: ['menu.Tree'],//用到的视图对象 init: function() {//初始化事件 this.control({ 'menuTree': {//捕获menuTree视图中的对象事件 itemclick: this.selectItem//捕获元素点击事件 } }); }, selectItem: function(){ console.log('click item');//用chrome浏览器时,打开console能看到输出 } });
2.3 app/store/menu.js
这里我把proxy写在了一起,下载代码后能看到role的处理,我是分开写的。Ext.define('Manage.store.Menu', { extend: 'Ext.data.TreeStore',//从TreeStore继承,因为左侧是Tree对象 autoLoad : true, proxy: {//配置代理 type: 'ajax', api: { read: Ext.config.root + 'data/menus.js' }, reader: { type: 'json', root: 'childrens' } }, sorters: [{ property: 'leaf', direction: 'ASC' }], root: { nodeType: 'async', text: 'Ext JS', expanded: true } });
2.4 app/view/menu/tree.js
Ext.define('Manage.view.menu.Tree', { extend: 'Ext.tree.Panel', alias : 'widget.menuTree',//别名,控制器中捕获事件就是通过这个名字查找到的 header : false, border : 0, store: 'Menu', rootVisible: false });
2.5 app/view/Viewport.js
这个文件就是引导文件(app.js)中配置自动创建Viewport调用的。Ext.define('Manage.view.Viewport', { extend: 'Ext.container.Viewport', requires: [ 'Manage.view.Head', 'Manage.view.Menu', 'Manage.view.Foot', 'Manage.view.Body' ], layout: 'border', items: [{ region: 'north', height: 45, xtype: 'head' },{ region: 'west', width: 225, xtype: 'menu' },{ region: 'south', height: 25, xtype: 'foot' },{ region: 'center', xtype: 'body' }] });
其他的文件请看下源代码,明白一个模块的,其他的都类似,如果还不清楚可以看本人其他的文章,链接:/article/8413221.html
本篇DEMO地址:http://download.csdn.net/detail/xz2001/5381233
注:仅是ExtJS部分DEMO
相关文章推荐
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合二:生成数据库
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合五:数据访问层
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合九:搭建布局结构
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合三:EF构建持久层
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合六:业务逻辑层
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合四:DbContext生命周期
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合一:构建项目框架
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合七:数据传输对象
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合四:DbContext生命周期
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合十:TreePanel 之 管理菜单
- 【项目实战】基于Extjs+SpringMVC+Spring+Mybatis整合的进销存管理系统详解---目录
- MESSL(maven + extjs + spring portlet mvc + spring web flow + liferay )整合架构 1
- MESSL(maven + extjs + spring portlet mvc + spring web flow + liferay )整合架构 2
- MESSL(maven + extjs + spring portlet mvc + spring web flow + liferay )整合架构 4
- Spring3.0.4MVC整合Extjs或者是EasyUi,或者Kendo说找不到路径报404需要配置mvc:resources/
- MESSL(maven + extjs + spring portlet mvc + spring web flow + liferay )整合架构 5
- MESSL(maven + extjs + spring portlet mvc + spring web flow + liferay )整合架构 6
- MESSL(maven + extjs + spring portlet mvc + spring web flow + liferay )整合架构 7
- 【项目实战】基于Extjs+SpringMVC+Spring+Mybatis整合的进销存管理系统详解----项目简介(第一讲)
- MESSL(maven + extjs + spring portlet mvc + spring web flow + liferay )整合架构 8