extjs的初学实例

extjs的初学实例——简介

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

extjs的初学实例——工具/原料

extjs

编辑器

extjs的初学实例——方法/步骤

extjs的初学实例 1、

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


extjs的初学实例 2、

我们浏览一下官方网站:下面是光放网站的实例


extjs的初学实例 3、

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


extjs的初学实例 4、

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

extjs的初学实例_extjs


extjs的初学实例 5、

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


extjs的初学实例 6、

接下来我们要在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的初学实例 7、

本地化ExtJS

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

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

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

  

爱华网本文地址 » http://www.aihuau.com/a/25101010/185.html

更多阅读

vlookup函数的操作实例 lookup函数的使用方法

vlookup函数的操作实例——简介vlookup函数是excel中非常重要的查找引用函数,掌握它可以减少很多工作量,下面本文就通过一个简单的例子演示函数用法。vlookup函数的操作实例——工具/原料office excelvlookup函数的操作实例——语法

多款样式儿童毛衣编织方法的详细实例教程 儿童毛衣编织实例

  儿童毛衣编织款式 长款开衫图解加真人秀秋凉了。。给娃娃织了一件开衫。。平时白天都不大上网,手机挂着Q,经常有人喊我,但我未必及时回复。望见谅!天天磨啊磨的,一件小小的衣服也磨了一个多星期,但效果确是相当欢喜,今天下午出去拍个真

Linux防火墙的配置实例 思科防火墙配置实例

Linux防火墙的配置实例2011年09月23日 星期五 上午 10:10转载自 分享最终编辑 ljx081我们该如何利用Linux操作系统自带的防火墙来提高网络的管理控制功能呢?具体的来说,我们可以分三步走。一是先在Linux服务器上开一个后门,这个后门是

声明:《extjs的初学实例》为网友柔情痞子分享!如侵犯到您的合法权益请联系我们删除