之前一直听说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。效果如下图:


JSP+Extjs4.2--第一个应用HelloWorld
 

第二步:新建项目,导入需要的文件

 

我使用的eclipse作为开发工具:

 新建一个项目(我这里项目名为:Extjs-HelloWorld),然后在WebContent根目录下新建Extjs4.2文件夹,用来存放Extjs4.2的相关资源:

 

我们下载后解压的Extjs文件夹下有下图所示这么多的东西:

JSP+Extjs4.2--第一个应用HelloWorld
 全部导入我们的项目显然是很庞大的,而有些不是我们需要的,所以我这里只导入需要的资源,如下图所示:

JSP+Extjs4.2--第一个应用HelloWorld
 
 第三步:在页面测试

 

 接下来我们要在页面中添加引用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>

 好吧,现在可以运行当前项目,你可以在浏览器中看到的效果如下:


JSP+Extjs4.2--第一个应用HelloWorld
 

到这里,第一个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页面中,然后刷新页面,效果如下图:


JSP+Extjs4.2--第一个应用HelloWorld
 
 好吧,以上就是我第一个Extjs4.2的学习过程。。

相关文章:

  • 2021-06-27
  • 2021-05-30
  • 2021-04-28
  • 2022-01-12
  • 2021-11-17
  • 2022-12-23
  • 2021-12-16
猜你喜欢
  • 2021-07-13
  • 2021-08-01
  • 2021-06-12
  • 2021-05-25
  • 2021-12-07
  • 2021-11-28
  • 2021-07-19
相关资源
相似解决方案