之前一直听说Extjs很强大，最近有点空就果断学习一下~
由于我主攻的是J2EE领域，所以这里就用jsp+Extjs来演示自己对Extjs的学习过程，按照惯例，第一个应用就来个HelloWorld吧。
第一步：下载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文档，以及示例内容。我们先将压缩包解压缩，然后就可以在浏览器运行解压文件夹下的index.html观看各种example。效果如下图：
第二步：新建项目，导入需要的文件
我使用的eclipse作为开发工具：
新建一个项目（我这里项目名为：Extjs-HelloWorld），然后在WebContent根目录下新建Extjs4.2文件夹，用来存放Extjs4.2的相关资源：
我们下载后解压的Extjs文件夹下有下图所示这么多的东西：
全部导入我们的项目显然是很庞大的，而有些不是我们需要的，所以我这里只导入需要的资源，如下图所示：
第三步：在页面测试
接下来我们要在页面中添加引用extjs给我们带来的效果。在使用Extjs的时候，我们必须要引用脚本和样式两部分。脚本的内容可以通过bootstrap.js来自动添加，而样式则需要我们手动的来添加了，例如我们要在项目中使用neptune样式（neptune 是在4.2中新增的样式，看上去比较现代一些，但不支持IE6），那么我们需要引入的文件如下：
<link href="./Extjs4.2/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script src="./Extjs4.2/bootstrap.js"></script>
新建一个index.jsp页面，完整的页面代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ExtJs-HelloWorld</title>
<link href="./Extjs4.2/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script src="./Extjs4.2/bootstrap.js"></script>
<script type="text/javascript">
function init() {
Ext.MessageBox.alert("ExtJS", "Hello ExtJS");
}
Ext.onReady(init);
</script>
</head>
<body>
</body>
</html>好吧，现在可以运行当前项目，你可以在浏览器中看到的效果如下：
到这里，第一个extjs4.2的应用已经完成了。
下面可以对Extjs进行本地化:
在我们保留的Extjs4.2文件中，有一个locale目录，我们保留了其中的 ext-lang-zh_CN.js 文件，这个文件是我们汉语的本地化文件，我们只需要添加该文件的引用，就能够轻松的实现ExtJS的本地化：
<script src="./Extjs4.2/locale/ext-lang-zh_CN.js"></script>将以上这句代码加入到index.jsp页面中，然后刷新页面，效果如下图：
好吧,以上就是我第一个Extjs4.2的学习过程。。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
