码迷,mamicode.com
首页 > Web开发 > 详细

在Eclipse中配置ExtJs

时间:2016-03-02 01:40:17      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

新项目启动,需要用ExtJs,为了学好它,现在开始纪录这方面的知识,Go!

一、配置Eclipse插件Spket

  • Eclipse版本:Eclipse Java EE IDE for Web Developers. Version: Mars.2 Release (4.5.2)
  • ExtJs4.2下载地址:http://cdn.sencha.com/ext/gpl/ext-4.2.1-gpl.zip  官网地址:http://www.sencha.com/products/extjs

  • 打开Eclipse选择Help-->Install New Software,点击Add按钮,Name任意,Location输入:http://www.agpad.com/update/,按照提示点击Next下一步,开始安装Spket插件。
  • 安装结束,重新启动Eclipe,选择Window-->Preferences,发现spket选项,选择spket>JavaScript Profiles,点击右边的New按钮,Name输入ExtJs,点击Add Library按钮,选择ExtJs,点击Add File按钮,选择ext-all-dev.js文件,最后点击ExtJs(带G图标的),选择Default按钮,重启Eclipse。
  • 新建一个.js文件,输入Ext.后自动提示方法列表说明配置成功。
  • 配置js默认编辑器,选择Window>Preferences>General>Editors>File Associatior>*.js>选择spket为default.

二、引入ExtJs文件

  • 在Eclipse中新建一个web项目,加入ExtJs的几个核心文件,结构如下图:

技术分享

三、编写程序,测试

  • 新建index.js文件:
Ext.onReady(function() {
            Ext.Msg.alert(‘hello‘, ‘hELLO WORLD‘);
        });
  • 新建index.jsp文件:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- 引入ExtJS框架样式 -->
<link rel="stylesheet" type="text/css" href="ExtJS4.2.1/resources/css/ext-all.css">

<!-- 引用中文环境文件 -->
<script type="text/javascript" src="ExtJS4.2.1/locale/ext-lang-zh_CN.js"></script>

<!-- 引用extjs 引导文件 -->
<script type="text/javascript" src="ExtJS4.2.1/bootstrap.js"></script>

<!-- 引用index.jsp 对应的index.js -->
<script type="text/javascript" src="index.js"></script>
</head>

<body>
</body>
</html>
  • 启动Tomcat,运行Web项目:http://localhost:8888/WebDemo/

技术分享

  ok,大功告成,ExtJs的知识还很多,慢慢学习吧。

在Eclipse中配置ExtJs

标签:

原文地址:http://www.cnblogs.com/BigRiverCrab/p/5233426.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!