ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合八：ExtJS及其MVC

这篇文章写的有些晚，本打算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。

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'
    }]
});

其他的文件请看下源代码，明白一个模块的，其他的都类似，如果还不清楚可以看本人其他的文章，链接： http://blog.csdn.net/xz2001/article/details/8456578

本篇DEMO地址：http://download.csdn.net/detail/xz2001/5381233

注：仅是ExtJS部分DEMO