在MyEclipse 6.5中配置ext开发环境

最近要用到ext，就将我配置的过程跟大家说说，第一次用，有没有多余的步骤，暂时不知道呢，欢迎大家指正。

刚开始也是在网上找了一大堆的，都是转载又转载，或说得不清楚的，本人是昨天搞到现在才总算是把环境给搭建起来了。

原环境：MyEclipse 6.5 + jdk1.6.0_18

这个过程需要下载的文件：

spket-1.6.18.jar

ext-3.3.1.zip

extbuilder_update-20081116.zip

extbuilder-src-20081116.zip

GEF-ALL-3.7.0RC4.zip

总共安装过程包括下面3步：

 

 

第一步：安装Spket（参考：http://blog.csdn.net/lizh0912/archive/2009/02/23/3929925.aspx，不用每一步都按里面的走，根据自己看到的界面参考这篇文章设置就ok了）

 

1、方法一：在线安装

MyEclipse -> Help -> Software Updates -> Find and Install...-> Search for new features to install ->New remote site...
Name: "Spket", Url: "http://www.spket.com/update/"，选择finish后，提示错误。(这种方法安装不成功)

 

2、方法二：下载jar包安装

我这里下载的是最新版spket-1.6.18.jar，在网上一搜一大堆下载链接的。

直接双击spket-1.6.18.jar运行安装，安装过程参考：http://blog.csdn.net/lizh0912/archive/2009/02/23/3929925.aspx

重启MyEclipse，初始化插件。

然后就是配置ext，也参考http://blog.csdn.net/lizh0912/archive/2009/02/23/3929925.aspx这里，因为这里已经介绍得很详细了，图文并貌。简单文字说明：

Window -> Preferences -> Spket -> JavaScript Profiles -> New ；
输入“ExtJS”点击OK；
选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”；
选择 “ExtJS”并点击“Add File”，然后在你的./ext-3.3.1目录中选取“ext.jsb2” 文件。

Add File这步要注意的是，3.0以后的版本添加的文件是：ext.jsb2（D:/design soft/ext/ext-3.3.1这是我的文件所在目录）。

（这种方法安装成功）

 

3、方法三：下载压缩包

下载spket的压缩包文件，将features和plugins文件夹里的内容copy到MyEclipse的对应文件夹下（D:/Program Files/MyEclipse 6.5/eclipse这是我的目录）。（这种方法没有尝试）

 

第一步只是安装了开发ext的IDE，要实现可视化界面开发，还需要安装extbuilder。

 

 

 

第二步：安装extbuilder

extbuilder插件的安装配置及使用
下载地址：http://code.google.com/p/extbuilder/downloads/list

（extbuilder-src-20081116.zip，extbuilder_update-20081116.zip）
用户手册： http://code.google.com/p/extbuilder/wiki/UserGuide

参考网址：
http://blog.sina.com.cn/s/blog_4b3b7aff0100eimi.html
http://hi.baidu.com/zst89/blog/item/2c00c089d9af92729e2fb4ef.html

 

1、方法一：在线安装
（1）、make sure you eclipse version is 3.2,3.3 or 3.4 with GEF installed.
（2）、download archived update site from http://code.google.com/p/extbuilder/downloads/list
（3）、Click Help->Software Updates->Find and Install...->Search for new features to install,Click Next
（4）、Click New Archived Site-> Browse to extbuilder_update.zip and click Open.
（5）、Click OK and follow the instructions to install.
（6）、Restart you myeclipse
（这种方法安装不成功）

 

2、方法二：link方法
D:/Program Files/MyEclipse 6.5/eclipse/links在这个文件夹下创建extbuilder.link文件，

文件内容：path=D://dragon//lib//extbuilder_update-20081116
这种方法在myEclipse里没看到有反应。（这种方法安装不成功）

 

3、方法三：下载压缩包
（1）、D:/dragon/lib/extbuilder_update-20081116将这个文件夹下features、plugins文件夹里的内容复制到D:/Program Files/MyEclipse 6.5/eclipse文件夹下对应的文件夹里面
（2）、重启myeclipse，在prefrences下面找到ExtJs Builder，里面的ExtJs Directory就是你存放extjs的目录D:/design soft/ext/ext-3.3.1

（这种方法安装成功）

 

做完第二步之后，New -> Other... -> ExtJs Page新建一个ext页面：

 

问题来了！！！！！

（问题1：ExtBuilder没显示界面，解决：第三步）

刚开始的时候，UI Editor界面是一片空白，没有显示控件，但js代码正常，待做完第三步之后，才会出现上图看到的界面。

（问题2：工具栏控件无法拖动，解决：参考http://hi.baidu.com/zst89/blog/item/2c00c089d9af92729e2fb4ef.html）

到这里有一点是很多初初接触extbuilder的人不解的地方，网上也很少有人说到这点，我是找了很久，才看到有一个人说到点上的。

这里只是大家对extbuilder不理解，因为一般的图形开发工具，控件都是直接拖动的，如JBPM等。

UI Editor 其实是一个浏览器，不然ext基于JavaScript的效果不会这么快的显示出来了。所以工具栏的控件是不能拖动到页面上的。用鼠标点击左边工具栏，如Button按钮后，将鼠标移动到Outline里某个panel上，就会在这个panel上新建一个button了。如下图：

 

 

 

 

第三步：安装GEF

下载地址：http://www.eclipse.org/gef/（http://www.eclipse.org/gef/downloads/index.php）

我这里下载的是GEF-ALL-3.7.0RC4.zip

 

1、方法一：在线安装

• Update site for releases: http://download.eclipse.org/tools/gef/updates/releases/
• Update site for milestones: http://download.eclipse.org/tools/gef/updates/milestones/
• Update site for integration and maintenance builds: http://download.eclipse.org/tools/gef/updates/interim/

• （这种方法安装不成功）

   

  2、方法二：下载压缩包

  解压后，将.../GEF-ALL-3.7.0RC4/eclipse文件夹里features、plugins文件夹里的内容分别copy到D:/Program Files/MyEclipse 6.5/eclipse文件夹下对应的文件夹里面
  重启myeclipse，再次打开UI Editor，界面能正常显示控件了。

   

   

   

  That's all, please injoy your work! Good luck!