ExtJS MVC架构讲解
- 本文地址 http://www.showframework.com/2012/07/extjs-mvc-architecture/
- 本文PDF下载
大规模客户端应用通常不好实现不好组织也不好维护，因为功能和人力的不断增加，这些应用的规模很快就会超出掌控能力，ExtJS 4
带来了一个新的应用架构，不但可以组织代码，还可以减少实现的内容
新的应用架构遵照一个类MVC的模式，模型（Models）和控制器（Controllers）首次被引入。业界有很多种MVC架构，基本大同小异，ExtJS
4的定义如下：
-
Model模型
是字段和它们的数据的集合，例如
User模型带有username和password字段，模型知道如何持久化自己的数据，并且可以和其他模型关联，模型跟ExtJS 3 中的Record类有点像（区别是，Record只是单纯的扁平结构，而Model可以nest），通常都用在Store中去展示grid和其他组件的数据 - View视图 是组件的一种，专注于界面展示 – grid, tree, panel 都是view
- Controllers控制器 一个安放所有使你的app正确工作的代码的位置，具体一点应该是所有动作，例如如何渲染view，如何初始化model，和app的其他逻辑
这篇教程中将创建一个简单的管理用户数据的例子，做完这个例子，你会学会如何用ExtJS
4的架构把简单的应用组织到一起。
应用架构是关于提供结构和一致性，是关于真实的类和框架代码的，遵守约定可以带来很多重要的好处：
- 每个应用都是相同的工作方式，所以你只需要学习一次
- 可以很容易的共享代码，因为所有应用工作模式都一样
- 可以创建属于自己的混淆的版本用于发布
File Structure文件结构
ExtJS 4 应用都遵循一个统一的目录结构，每个应有都相同。详情可以参见ExtJS 4
入门，MVC中，所有类都放在app目录里面，这个目录可以有子目录，代表的是命名空间（一个子目录对应一个命名空间），使用不同的目录存放views,models,controllers,stores，当我们完成例子的时候，目录结构应该和下面截图一样：
在这个例子中所有文件都在'account_manager'目录中，ExtJS
SDK必须的文件在目录ext-4.0中，因此，index.html应该如下：
<html>
<head>
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Creating the application in app.js 在app.js中创建应用
每个ExtJS
4的应用都从一个Application类的实例开始，这个实例包含应用的全局配置（例如应用的名字），这个实例也负责维护对全部模型、视图、控制器的引用的维护，还有一个launch函数，会在所有加载项加载完成之后调用。
让我们创建一个简单的Account
Manager应用管理用户帐户。首先需要选择一个全局命名空间，所有ExtJS4应用都需要有一个全局命名空间，以让所有应用中的类安放到其中，这个例子中我们使用AM(Account
Manager)
Ext.application({
//今天有人问我，demo运行出错，
//他妹的，官方demo错了 官方demo写的是 requires: 'Ext.container.Viewport'，
//这里的requires需要是个数组，extjs源码没处理好只有一个requires的情况
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
首先我们调用了Ext.application创建了一个应用实例，并设置了应用名称”AM”，这样做会自动创建一个全局变量”AM”，并自动注册命名空间”AM”到Ext.Loader，用类似的方式也设置了app作为appFolder。另外在launch函数中，创建了一个Viewport，只包含一个撑满浏览器窗口的Panel。
Defining a Controller 定义一个控制器
控制器是应用的粘合剂，它们所作的事情就是监听事件并执行动作，继续我们的Account
Manager应用，创建一个控制器。创建app/controller/Users.js这个文件，并添加如下代码：
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
console.log('Initialized Users! This happens before the Application launch function is called');
}
