新项目启动，需要用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的知识还很多，慢慢学习吧。
时间： 2024-10-13 12:23:52