日期:2014-05-16  浏览次数:20276 次

ExtJS 4.2 教程-01:Hello ExtJS

转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-1-hello-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中新建应用程序,使用默认的应用程序池,建好以后如下图:

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 的相关资源: