ExtJS 4.2 教程-01:Hello ExtJS

摘要:
关于ExtJS是什么我就不多说了,本系列教程将介绍ExtJS4.2的用法,这是本系列的第一篇,惯例从HelloWorld开始。下载ExtJSExtJS目前的最新版本是4.2,我们可以从官方网站下载最新版本的ExtJS。脚本的内容可以通过bootstrap.js来自动添加,而样式则需要我们手动的来添加了,例如我们要在项目中使用neptune样式,那么我们需要引入的文件如下:完整的Layout代码如下:@ViewBag.Title@RenderSection@RenderBody()HelloExtJS在引入文件后,我们要测试一下ExtJS是否正常的工作了。

关于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中新建应用程序,使用默认的应用程序池,建好以后如下图:

image

我们浏览一下网站:

image

在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等资源文件都放在这个文件夹中。

image

在js目录中新建ExtJS_4.2文件夹,用来存放ExtJS 4.2 的相关资源:

image

如果将所有的文件都添加到项目中,很明显是有些庞大了,所以我们可以添加用到的内容,简化后的目录结构如下:

image

接下来我们要在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的根目录。然后浏览网站:

image

本地化ExtJS

在我们保留的ExtJS文件中,有一个locale目录,我们保留了其中的 ext-lang-zh_CN.js 文件,这个文件是我们汉语的本地化文件,我们只需要添加该文件的引用,就能够轻松的实现ExtJS的本地化:

<script src="~/Resources/js/ExtJS_4.2/locale/ext-lang-zh_CN.js"></script>

将这段代码添加到Layout文件中,然后刷新页面:

image

刚才的OK 现在变成了“确定”。

免责声明:文章转载自《ExtJS 4.2 教程-01:Hello ExtJS》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Fastdfs 存储如何在半小时搭建一个简单的日志分析平台?下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Jsonp跨域请求

一、同源策略 要理解跨域,先要了解一下“同源策略”。所谓同源是指,域名,协议,端口相同。所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西。 在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的。例如我们在自己的网站通过ajax去获取豆瓣上https://developers.douban.com...提供的接口数据。这里...

『NodeJS』简单的本地 DNS 代理脚本

风飘林's Blog 牛博 『NodeJS』简单的本地 DNS 代理脚本 var dgram = require("dgram"); const DNSADDRESS = "8.8.8.8"; const DNSPORT = "53"; console.log("DNS Server: " + DNSADDRESS + ":" + DNSPORT);...

Unity3D for iOS初级教程:Part 1/3(上)

                                                              Unity3D for iOS初级教程:Part 1/3(上) 这篇教材是来自教程团队成员 Christine Abernathy, 他是Facebook的开发支持团队的工程师。Unity是最为流行的游戏引擎之一。这是有充分缘由的:U...

jquery中ajax的dataType属性包括哪几项

参考ajax api文档:http://www.w3school.com.cn/jquery/ajax_ajax.aspdataType类型:String预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaSc...

从V8引擎编程理解javascript执行环境

一、V8简介 google code上对它的解释如下: V8 is Google's open source JavaScript engine. V8 is written in C++ and is used in Google Chrome, the open source browser from Google. V8 implements...

Linux记录屏幕输出log

应用场景: 请专家通过Console处理问题时,保留console输出无疑是非常有意义的。一来可留着作为维护日志,二来可供事后学习。 最简洁的方式是通过系统自带的script命令去记录。 $ script -a /tmp/xxx.log 当操作完毕后按住ctrl+d或shell执行exit退出时,即可结束script程序,log保存在指定的文件。 lo...