EXTJS4之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: '[email protected]' },
{ name: 'Tommy', email: '[email protected]' }
]
});
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单独分离。这样便于以后的重用。如有不妥之处，还请留言。大家一块儿学习。