目前MVC的应用已经不在满足于后台的开发。分层的应用更好的使得系统中的各层进行解耦。可以提高代码的阅读性以及后期的维护性。
在面向对象编程的今天，古老的JS代码也加入了对象编程的年代，自然MVC的结构也是必然的发展。
我之前并未接触过JS方面的MVC，因此借此机会进行一次新鲜的尝试。
Ext 的MVC架构包含了Controller, View, Model, Store. 通过其定义就可明确知道这些组件在MVC中的应用。
下面我们一步一步的来配置MVC框架。
1. 创建目录
我这里所说的是创建工程目录，我已经将Ext JS的代码放在了单独的Ext文件夹中。
根据以前后台的经验，我将系统目录分为以下几类：
说明一下：
controller,model,store,view 就不用多说了。
plugins 里面放置前端的一些自定义插件。
pages里面存放所有的html/jsp页面
2. 创建首页
在pages中，创建一个index.html页面作为首页。（在不涉及后台代码前，我暂时采用html的页面）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/ext-theme-neptune/ext-theme-neptune-all.css"/>
<link rel="stylesheet" type="text/css" href="../css/library.css"/>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../js/libraryApp.js"></script>
<title>ODC Library</title>
</head>
<body>
</body>
</html>
页面上并没有太多代码，在Ext的MVC中，所有的页面代码都是由Ext.application动态创建的。（富客户端的任务是把复杂任务简单化，简单任务复杂化。所以请做好用复杂的方法来解决简单问题的心理准备。）
一般来讲一个页面对应一个application. 由application创建相应的View,Controller, 在Controller中引入Model，并且绑定Store
3. 创建启动脚本：libraryApp.js
这个脚本是所有程序的入口
Ext.application({
name:'Library',
appFolder:'../js',
controllers:['Library','Login'],
launch: function(){
Ext.create('Library.view.LibraryView');
}
});
在此，我手动创建了一个Viewport，如果autoCreateViewport为true时，Ext会动态加载 /{appFolder}/view/Viewport.js，如果该文件不存在，则会报加载失败的错误。
系列链接：Web应用开发（前端）—Ext Js的MVC（2）