系列ExtJS教程持续更新中，点击查看>>最新ExtJS教程目录
- ExtJS 4.2 教程-01：Hello ExtJS
- ExtJS 4.2 教程-02：bootstrap.js 工作方式
- ExtJS 4.2 教程-03：使用Ext.define自定义类
- ExtJS 4.2 教程-04：数据模型
- ExtJS 4.2 教程-05：客户端代理（proxy）
- ExtJS 4.2 教程-06：服务器代理（proxy）
- ExtJS 4.2 教程-07：Ext.Direct
- ExtJS 4.2 教程-08：布局系统详解
关于ExtJS 是什么我就不多说了，本系列教程将介绍ExtJS 4.2的用法，这是本系列的第一篇，惯例从Hello World开始。
下载 ExtJS
ExtJS 目前的最新版本是 4.2，我们可以从官方网站下载最新版本的ExtJS。
下载地址：http://cdn.sencha.com/ext/gpl/ext-4.2.1-gpl.zip
官网地址：http://www.sencha.com/products/extjs
下载完成以后，我们就得到了ExtJS 的源代码、API文档，以及示例内容。我们先将压缩包解压缩，然后在IIS中新建一个网站，网站路径指向ExtJS 的目录，这样方便我们浏览ExtJS的文档等内容。不懂新建网站的朋友请自行百度谷歌。
我是在IIS 的Default Web Site中新建应用程序，使用默认的应用程序池，建好以后如下图：
我们浏览一下网站：
在ASP.NET MVC 中使用ExtJS 4.2
由于我本人是做ASP.NET Web 开发的，所以我在本教程中使用 ASP.NET MVC 作为示例，开发工具自然是微软的Visual Studio 2012（你也可以在任意的Web页面中使用ExtJS，作为一个JS库，它不受Web 服务器端开发的限制）。
首先我们新建一个ASP.NET MVC 4 应用程序，名称为 SampleExtJS。
然后在项目中添加一个文件夹“Resources”，我们将项目中所有用到的js、css、image等资源文件都放在这个文件夹中。
在js目录中新建ExtJS_4.2文件夹，用来存放ExtJS 4.2 的相关资源：
如果将所有的文件都添加到项目中，很明显是有些庞大了，所以我们可以添加用到的内容，简化后的目录结构如下：
接下来我们要在layout.cshtml 页面中添加引用。在使用ExtJS的时候，我们必须要引用脚本和样式两部分。脚本的内容可以通过bootstrap.js来自动添加，而样式则需要我们手动的来添加了，例如我们要在项目中使用neptune样式（neptune 是在4.2中新增的样式，看上去比较现代一些，但不支持IE6），那么我们需要引入的文件如下：
<link href="~/Resources/js/ExtJS_4.2/resources/css/ext-all-neptune.css" rel="stylesheet" /> <script src="~/Resources/js/ExtJS_4.2/bootstrap.js"></script>
完整的Layout代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> <link href="~/Resources/js/ExtJS_4.2/resources/css/ext-all-neptune.css" rel="stylesheet" /> <script src="~/Resources/js/ExtJS_4.2/bootstrap.js"></script> @RenderSection("script", false) </head> <body> @RenderBody() </body> </html>
Hello ExtJS
在引入文件后，我们要测试一下ExtJS 是否正常的工作了。在Views>Home>Index.cshtml中，我们为script 节添加内容：
@section script{ <script type="text/javascript"> function init() { Ext.MessageBox.alert("ExtJS", "Hello ExtJS"); } Ext.onReady(init); </script> }
同样在IIS中为Default Web Site 添加应用程序，路径为我们刚建好的SampleExtJS的根目录。然后浏览网站：
本地化ExtJS
在我们保留的ExtJS文件中，有一个locale目录，我们保留了其中的 ext-lang-zh_CN.js 文件，这个文件是我们汉语的本地化文件，我们只需要添加该文件的引用，就能够轻松的实现ExtJS的本地化：
<script src="~/Resources/js/ExtJS_4.2/locale/ext-lang-zh_CN.js"></script>
将这段代码添加到Layout文件中，然后刷新页面：
刚才的OK 现在变成了“确定”。
本文还发布在了ExtJS教程网站起飞网上面，如果转载请保留本段声明，谢谢合作。
系列ExtJS教程持续更新中，点击查看>>最新ExtJS教程目录
本文转自齐师傅博客园博客，原文链接：http://www.cnblogs.com/youring2/p/3269503.html，如需转载请自行联系原作者
