EXTJS的mvc架构介绍

目前我们在构建我的应用程序时，采用的架构也有好多，其中我们最常用的也是最基础就是Model-View-Control(MVC),不管我们在构建什么类型的应用程序，我们都离不开MVC的设计。在EXTJS4中，也提供的MVC的设计思想，下面我们就来看一下，在EXTJS4中如何应用MVC的架构。

1、首先我们先简单介绍一下，4中MVC各层的基本概念。
Model:Model层，说白了，具体就是指EXT中的Ext.data.Model类，可以理解为数据集中的一条记录，Store依据于Model而得到数据。
Control:Control层，属于应用程序的业务逻辑层。用于加载应用程序中的Model、Store、View。以及处理View层中的事件。可以理解为，Control层是存放很多事件处理的一个集合。
View:View层，在ext中所有的组件都可以叫做View，比如panel、tree、grid。用于呈现Store的组件就是View层。
2、
EXT4中MVC的架构图

从上图中，我们可以看到，在EXTJS的app对象中，完成了两件事，加载ViewPort和Control。viewPort可以说是APP中的一个容器。用于装载View层中的组件。另在还加载了App中用到的Control。然后Controller中加载了App中所需要的Model、Store、View。Model抽象化了Data中的数据。Store依据Model层，装载Data中的数据。View装载显示Store中的数据。
3、在大体了解了Ext中的MVC结构后，我们就试着来写一个MVC的例子，看一下EXT中MVC的具体实现。
下图是我们项目中的JS的目录




（一）首先我们设置一下EXT的动态加载的属性。
Ext.Loader.setConfig({
enabled: true
});
上述代码是打开EXT的动态加载。
（二）首先我们创建一个EXT的Application。代码如下：
Ext.application({ name: 'AM',
appFolder: 'JS',
controllers: [
"Users" ],
launch: function () { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{
xtype: "userlist"
}] }); }});
App中的name属性定义一个名称，Ext会按照这个名称，自动为我们创建一个包名。appFolder定义App中动态加载JS文件的路径。Controller中定义应用程序中要加载的控制器类。App中的launch函数，该函数自动加载App中的ViewPort。
（三）接下来我们建立Controller类，代码如下：
Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller',
views: [ 'user.List', 'user.Edit' ],
stores:[ "Users"
],
models:["User"],
init: function () {
this.control({
'viewport>panel': {
render: function () { alert("panel rendered"); }
}, 'userlist': {
itemdblclick: function (grid, record) {
var view = Ext.widget("useredit");
view.down("form").loadRecord(record);
}
}
});
}});
如上图 所描述的。control加载view、store、model。并且处理view中的触发的事件
（四）Model、Store、View中类的实现
Ext.define('AM.store.Users', { extend: 'Ext.data.Store', model: 'AM.model.User', data: [ { name: 'Ed', email: '[e-mail]' }, { name: 'Tommy', email: '[e-mail]' } ]});

Ext.define('AM.model.User', { extend: 'Ext.data.Model', fields: ['name', 'email']});

Ext.define('AM.view.user.Edit', { extend: 'Ext.window.Window', alias: 'widget.useredit',
title: 'Edit User', layout: 'fit', autoShow: true,
width: 300,
height:150,
initComponent: function () { this.items = [ { xtype: 'form', items: [ { xtype: 'textfield', name: 'name', fieldLabel: 'Name' }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email' } ] } ];
this.buttons = [ { text: 'Save', action: 'save' }, { text: 'Cancel', scope: this, handler: this.close } ];
this.callParent(arguments); }});

Ext.define('AM.view.user.List', { extend: 'Ext.grid.Panel', alias: 'widget.userlist',
title: 'All Users',
initComponent: function () {
this.store = "Users";
this.columns = [ { header: 'Name', dataIndex: 'name', flex: 1 }, { header: 'Email', dataIndex: 'email', flex: 1 } ];
this.callParent(arguments); }});

以上就是MVC的示例，EXT的MVC把View、Model、Control单独分离。这样便于以后的重用。如有不妥之处，还请留言。大家一块儿学习。