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

浪里一淘

浏览: 11903 次
性别:
来自: 广州

最近访客更多访客>>

whb7807810

yscyr

peter_lsf

123zxczxzxc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2013-09 ( 3)
更多存档...

博客分类：

Extjs4.2

Extjs4.2 Extjs

之前一直听说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的学习过程。。

查看图片附件

分享到：

maven环境快速搭建

2013-09-03 12:02
浏览 4616
评论(1)
分类:Web前端
查看更多

1 楼 zichenking 2013-11-08

写的不错,找了很久终于在你这里找到了答案,其他的说明里面都是让添加bootstrap.js,但就是没有需要将bootstrap.js,ext-all.js,ext-all-dev.js,ext-all-debug.js一起拷贝到项目中来,谢谢了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论