MyEclipse8.6.1+spket1.6.23+extjs4.2.1

转自： http://windows9834.blog.163.com/blog/static/273450042014127102856287/

一、ExtJS简介

        Ext是一个Ajax框架，用于在客户端创建丰富多彩的web应用程序界面，是在Yahoo!UI的基础上发展而来的。官方网址：www.sencha.com

        ExtJS是一个用来开发前端应用程序界面的JS框架，借鉴Swing等思想，提供了一套完整的组件库及强大的ajax支持功能，可以用Ext来开发基于Ajax的富客户端应用。

二、ExtJS特点：

       使用标准的W3C技术；

       庞大的组件模型及控件库； 

       丰富绚丽的界面元素；

       强大实用的工具封装；

       开源GPL；         

三、ExtJS开发环境搭建：

        (1)  下载Extjs最新开发包extjs4.2.1 GPL,官方下载地址：http://www.sencha.com/products/extjs/download/ext-js-4.2.1/2281

        (2)  将Extjs4.2.1 GPL开发包copy到Myeclipse项目的/WebRoot目录下。

        注意：不需要整个extjs开发包全部导入，这样很容易造成Myeclipse卡死，因为Myeclipse会自动检测js的合法性，会占用大量的检测时间、cpu和内存。通常普通的开发只需要用到\extjs-4.2.1\resources文件包、\extjs-4.2.1\ext-all.js这两个资源就可以,需要中文化再导入\extjs-4.2.1\locale\ext-lang-zh_CN.js 就可以了。如下图所示：

        

四、安装spket插件

      首先到spket官网下载最新的jar安装包（当前最新的是spket 1.6.23）

      spket官网下载地址：http://www.spket.com/download.html 我下载Plugin包，然后与link的方式安装。

      解压“spket-1.6.23.zip”，并将“features”和“plugins”两个文件里面的文件复制到MyEclipse对应的插件文件夹内，我的为D:\MyEclipse\eclipse-plugins\spket-1.6.23，然后创建link文件“D:\MyEclipse\8.6.1\dropins\spket1.6.23.link”，内容为“path=..\\eclipse-plugins\\spket-1.6.23

”。

      重启MyEclipse，打开MyEclipse，Window->Perference，如果这时候你可以看到Spket选项，那就恭喜你Spket你已安装成功。

五、配置Extjs4.2.1的智能提示

在配置spket的JavaScript Profiles中的ExtJS时，网上有好多种方法，包括加载sdk.jsb3、ext-all-dev.js、ext-4.2.1.883.jsb2等，一头雾水，Extjs4.0以后的版本的都不再提供jsb文件，在下载extjs的zip中不会包含jsb文件，好在spket官网上有提供，大家可以去官网下载。

      

 

官网的安装虽然是英文的，其实很简单，只要把ext-4.2.1.883.jsb2下载放在extjs根目录下就可以了。

      打开MyEclipse，Window——Preferences——Spket——JavaScript Profiles——New...输入Name(如Extjs)，点击ok,选中Extjs节点，点击“Add Library”，选择ExtJS，再选中ExtJS子节点，点击“Add File” 添加extjs文件“ext-4.2.1.883.jsb“”

      最后一步，将 js默认打开方式设为 spket。(如果不成功，请重复检查上面的步骤，重点检查第6步，设置默认成功之后字体明显变黑)

     
 

七、让JSP拥有JQuery自动提示

      重启myeclipse后，打开Window -> Preferences -> Spket -> JavaScript Profiles -> New ； 输入“jQuery”点击OK； 选择“jQuery” 并点击“Add Library”然后在下拉条中选取“jQuery”； 选择 “jQuery”并点击“Add File”，然后选中你下载的jquery-1.8.2.js 文件；设成Default;

八、项目引入ExtJS文件

     注意：不需要整个Ext开发包全部导入，这样很容易造成eclipse卡死，因为eclipse会自动检测js的合法性，会占用大量的检测时间、cpu和内存。通常普通的开发只需要用到\extjs-4.2.1\resources文件包、\extjs-4.2.1\ext-all.js这两个资源就可以,需要中文化再导入\extjs-4.2.1\locale\ext-lang-zh_CN.js 就可以了。当然Extjs4.0开始比以往有些变化，用起来麻烦不小。与以前的引入三个文件不同，现在的4.0只要引用两个文件就行了。 在web页面中通过<script>标签引入ext的库文件。(注意引入顺序)

    

    <link rel="stylesheet" type="text/css" href="extjs-4.2.1/resources/css/ext-all.css"> //引入样式文件      <script type="text/javascript" src="extjs-4.2.1/bootstrap.js" ></script> //引入extjs引导文件    <script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>   //中文化

这里的bootstrap.js文件的作用主要是用于动态加载extjs文件（ext-all-dev.js、ext-all.js），当是本地环境时就加载ext-all-dev.js，当是正式环境是就加载ext-all.js，那它是怎么判断的呢，查看bootstrap.js就可以知道有三个条件：

当满足下面三个条件中的任何一个时就加载ext-all-dev.js，其它加载ext-all.js：

1、当前主机地址为localhost时

2、当前主机是使用IP V4地址时

3、当前协议是“file:”格式

       调用Ext.onReady()初始化组件       <script>           Ext.onReady(function(){            …///在这里面创建及使用ext控件            });        </script>