Extjs4.0.7使用前的准备

ExtJS4.0.7使用前的准备

红楼一梦红楼

ExtJS4.0.7使用前的准备 I

目录

目录 ................................................................................................................................................... I 一、选用工具 ................................................................................................................................... 1 二、环境搭建 ................................................................................................................................... 1

1、安装JDK（） ...................................................................................................................... 1 2、设置JDK的环境变量 ......................................................................................................... 1 3.安装MyEclipse9.0 ................................................................................................................. 2 4.配置tomcat ........................................................................................................................... 2 5.在MyEclipse里搭建tomcat ................................................................................................. 2 6.在MyEclipse里安装Spket插件........................................................................................... 7 7.还应做简单的设置： .......................................................................................................... 14

ExtJS4.0.7使用前的准备 1

一、选用工具

MyEclipse9.0、tomcat7.0.27、JDK1.7、spket1.6.23

二、环境搭建

1、安装JDK（）

假设安装目录为: D:\\Program Files\\Java\\jdk1.7.0_04

2、设置JDK的环境变量

计算机-->右键-->属性-->高级系统设置-->环境变量。如图：

ExtJS4.0.7使用前的准备 2

如果想让没个系统用户都能使用就选择“系统变量”；如果只想让当前用户使用则选择“xxx的用户变量”（其中xxx表示计算机用户名）。然后单击新建，如图：

变量名：path（如果是系统变量，则不用新建，在系统变量栏里有的） 变量值：D:\\Program Files\\Java\\jdk1.7.0_04\\bin（Java安装目录下的bin目录，如果是系统变量，则在原来的变量值最后加“;”后输入该变量值）。然后单击确定。 再单击新建，输入以下内容： 变量名：JAVA_HOME 变量值：D:\\Program Files\\Java\\jdk1.7.0_04（Java安装目录） 依次单击确定即可。

3.安装MyEclipse9.0 4.配置tomcat

1）将tomcat7.0.27解压。（假设解压到D:\\Program Files\\apache-tomcat-7.0.27） 2）设置环境变量

变量名：CATALINA_HOME

变量值：D:\\Program Files\\apache-tomcat-7.0.27（tomcat所在目录） 依次单击确定。

5.在MyEclipse里搭建tomcat

1）打开MyEclipse，然后单击：

Window-->Preferences-->MyEclipse-->Servers-->Tomcat-->Tomcat7.x。出现图所示界面：

ExtJS4.0.7使用前的准备 3

在Tomcat home directory栏单击Browse...

ExtJS4.0.7使用前的准备 4

找到tomcat7.0.27安装目录，单击确定，如图：

得到如图所示界面：

ExtJS4.0.7使用前的准备 5

记得将Enable选中，然后单击Integrated Sandbox，选中MyEclipse Tomcat6，选中Disable。如图：

单击OK。tomcat配置成功如图：

ExtJS4.0.7使用前的准备 6

单击后将鼠标移到Tomcat7.x处出现下图：

只要tomcat的环境变量设置正确就可以启动tomcat了。但我们还得配置虚拟路径，打开tomcat安装目录下的conf文件夹下的server.xml文件，如图：

其中path填写虚拟路径名，docBase填写WebRoot真实所在路径，reloadable填true表示当java代码改变重新保存编译后重启tomcat。如：

ExtJS4.0.7使用前的准备 7

对应的url：

搭建成功。

6.在MyEclipse里安装Spket插件

1）打开MyEclipse，单击Help，如图：

单击MyEclipse Configuration Center，单击Software，切换到Software栏：

ExtJS4.0.7使用前的准备 8

在Browse Software窗口下单击add site

Name: spket

URL: http://www.agpad.com/update

然后按OK就行了，接下来等finish后：

ExtJS4.0.7使用前的准备 9

在Browse Software-->Personal Sites-->spket下出现了

在其上分别单击右键-->Add to Profile。

添加完之后会在该页面的右下角显示添加的选项，下面显示apply 3 changes,单击下面的apply 3 changes按钮，会自动安装和更新。

安装完后，重新启动myeclipse后，在window--preferences下会看到spket,如图：

ExtJS4.0.7使用前的准备 10

安装成功以后依次单击Window->Preferences-->Spket-->JavaScript Profiles。接下来在右边单击按钮new：

输入name：ExtJS，单击OK。

然后单击右边的Add Library。选择ExtJS，单击OK。 在选中第二个ExtJS，单击右边Add File：

找到你存放ext-4.0.7-gpl处的build文件夹下的sdk.jsb3，然后单击打开。将sdk.jsb3文件添加进去。

ExtJS4.0.7使用前的准备 11

然后单击OK。

然后选中第一个ExtJS，单击右边的Default。

最后再单击General-->Editors-->File Associations，在File types处找到*.js并选中，然后在Associated editors出选择：

重启myeclipse，即可使用js编辑器。

可以将ext-4.0.7-gpl文件夹里需要的文件导入到自己的web工程，在开发时一般将整个ext-4.0.7-gpl文件夹导入到自己的web工程下的webroot目录下。

如下例：

ExtJS4.0.7使用前的准备 12

这是工程目录结构

自己写的js文件：

ExtJS4.0.7使用前的准备 13

可以看到已经带提示了，证明spket配置成功并生效了。

启动tomcat服务器，在浏览器输入：http://localhost:8080/extjs/example/HelloWorld.html 程序演示效果：

ExtJS4.0.7使用前的准备 14

7.还应做简单的设置：

然后再自己的工程里任意打开一个js文件，在空白处单击右键出现：

ExtJS4.0.7使用前的准备 15

将鼠标移到MyEclipse处，单击Manage Validation:

ExtJS4.0.7使用前的准备 16

8.最后应该注意的事项：

使用过程中MyEclipse可能会出现神秘错误（主要是我还没弄清楚是怎么回事），这是如果不是提示退出MyEclipse即可点击OK，如果出现提示退出MyEclipse，就点击NO。

此文还存在许多不足，希望大家提出指正！谢谢！