ExtJS 4.2 教程-01：Hello ExtJS

时间 2019-11-12

标签 extjs 4.2 教程 hello 繁體版

原文原文链接

关于ExtJS 是什么我就很少说了，本系列教程将介绍ExtJS 4.2的用法，这是本系列的第一篇，惯例从Hello World开始。javascript

下载 ExtJS

ExtJS 目前的最新版本是 4.2，咱们能够从官方网站下载最新版本的ExtJS。css

下载地址：http://cdn.sencha.com/ext/gpl/ext-4.2.1-gpl.ziphtml

官网地址：http://www.sencha.com/products/extjsjava

下载完成之后，咱们就获得了ExtJS 的源代码、API文档，以及示例内容。咱们先将压缩包解压缩，而后在IIS中新建一个网站，网站路径指向ExtJS 的目录，这样方便咱们浏览ExtJS的文档等内容。不懂新建网站的朋友请自行百度谷歌。bootstrap

我是在IIS 的Default Web Site中新建应用程序，使用默认的应用程序池，建好之后以下图：服务器

咱们浏览一下网站：工具

在ASP.NET MVC 中使用ExtJS 4.2

因为我本人是作ASP.NET Web 开发的，因此我在本教程中使用 ASP.NET MVC 做为示例，开发工具天然是微软的Visual Studio 2012（你也能够在任意的Web页面中使用ExtJS，做为一个JS库，它不受Web 服务器端开发的限制）。post

首先咱们新建一个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 如今变成了“肯定”。