MyEclipse8.6.1+spket1.6.23+extjs4.2.1_ext-4.2.1.883.jsb2-优快云博客

本文链接：https://blog.youkuaiyun.com/paincupid/article/details/42104761

转自： 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 就可以了。如下图所示：

MyEclipse8.6.1+spket1.6.23+extjs4.2.1 - windows9834 - 寒江孤影

四、安装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>