开发者社区> 老朱教授> 正文

ExtJS 4.2 教程-01:Hello ExtJS

简介:
+关注继续查看

系列ExtJS教程持续更新中,点击查看>>最新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教程网站起飞网上面,如果转载请保留本段声明,谢谢合作。

系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/3269503.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ActiveReports 报表应用教程 (1)---Hello ActiveReports
原文:ActiveReports 报表应用教程 (1)---Hello ActiveReports      在开始专题内容之前,我们还是了解一下 ActiveReports 是一款什么产品:ActiveReports是一款在全球范围内应用非常广泛的报表控件,以提供.NET报表所需的全部报表设计功能领先于同类报表控件,包括对交互式报表的强大支持、丰富的数据可视化形式、与Visual Studio的完美集成、以及对WPF / WinForm / ASP.NET / Silverlight和Windows Azure的多平台支持等。
1230 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29197 0
Ext 2.0 教程 目录
Ext 2.0 Tutorials All tutorials in this section were written for Ext 2.0, or can be used with any version of Ext.
804 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20711 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23586 0
Go 1.18 新特性多模块工作区教程-让多模块开发变得简单
随着 2022 年 3 月 15 日 go 1.18 正式发布,新版本除了对性能的提升之外,还引入了很多新功能,其中就有 go 期盼已久的功能泛型(Generics),同时还引入的多模块工作区(Workspaces)
184 0
+关注
3545
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载