中文教程

在JS的开发过程中，大规模的JS脚本难以组织和维护，这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题，在Extjs 4.x版本中引入了MVC开发模式，开始将一个JS（Extjs）应用程序分割成Model-View-Controller三层，为JS应用程序的如何组织代码指明了方向，同时使得大规模JS代码变得更加易于重用和维护；这就是Extjs MVC开发模式的初衷。

在官方给出的MVC例子中，我们可以看到一个简单的列表编辑功能，这篇文章就围绕这个功能进行详细的讲解，让我们一起来揭开Extjs MVC的神秘面纱！

本文的示例代码适用于Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中亲测可用！

现在，JavaScript框架已成为Web项目开发不可或缺的一部分。那是因为很长一段时间以来，各种浏览器之间有很大的差别，人们不得不编写框架对此进行屏蔽。问题在于，各种浏览器甚至在基本问题上都难以取得一致，以致框架还要针对浏览器该如何工作设计自己的模型，比如如何传播事件、如何与DOM交互等。于是出现了许多框架，常见的有jQuery、Dojo、MochiKit、Ext JS、AngularJS、Backbone 、Ember、React等。对于这种情况，谷歌工程师Joe Gregorio在博文中写道：

"我认为是时候重新考虑JS框架模型了。没有必要发明另外一种做事方式，只要使用HTML+CSS+JS就行了。"

在Ext JS 5，使用了新的脚本和样式加载方式，这对于将应用程序导入到Web项目中产生了点小麻烦。而对于本地化文件的导入，也采用了新的方式，本文将一一解答这些问题。

将Ext JS 5应用程序导入Web项目

在Ext JS 5，会使用bootstrap.js来加载应用程序脚本和样式，而bootstrap.js是根据Bootstrap.json来加载样式文件和脚本的。问题就在这个Bootstrap.json文件上，如果是使用IIS的Web项目，首先会碰到的问题是Web服务器不允许下载JSON文件，这时候，就得先解决这个问题，不然加载肯定会出错。

如果认真研究一下bootstrap.js文件，会发现它主要用来获取脚本和样式文件的地方是Bootstrap.json中的js和css成员值。在自动生成的Bootstrap.json文件中，脚本和样式文件的默认路径就是没有路径，也就是与首页文件是同一路径，这样，当首页文件与脚本和样式文件不在同一路径，就加载不了脚本和样式了。由于Bootstrap.json文件中要加载的脚本文件很多，要直接修改Bootstrap.json文件中的文件的路径，不太现实。那就只能在bootstrap.js文件中找寻解决方案了。