Sencha EXTJS6的 Eclipse 插件安装指南

Sencha EXTJS的 Eclipse 插件安装指南

（翻译：苏生米沿）

本文地址：http://blog.csdn.net/sushengmiyan/article/details/52566099

本文作者：sushengmiyan

本文PDF格式良好版下载地址：http://download.csdn.net/detail/sushengmiyan/9632273

Sencha Eclipse 插件介绍

Sencha的Eclipse IDE插件是一个集成的开发环境工具，它可以在Eclipse软件和sencha框架之间顺畅的创建工程。这种集成表现在代码补全-与原生的eclipse行为无缝配合。

Sencha 专家将会爱上它对重构和源代码追踪带来的简便。

Sencha 入门者将会从插件提供的代码自动补全以及代码结构和语法最佳实践推荐中受益。

插件安装

要求

1.Eclipse (Luna or Mars以上版本)

2.  Sencha Cmd 6+ (可选的­要求创建和运行Sencha apps)

Cmd下载地址：https://www.sencha.com/products/sencha­cmd/

3.Ext JS 4.2.版本以上 或者 Sencha Touch 2.1版本以上

Extjs产品获取地址：http://www.sencha.com/products/extjs 

Touch产品获取地址：http://www.sencha.com/products/touch

4. 支持的操作系统

Windows 7 及更高版本 (64位和32位都支持)

Mac OSX

Linux (只支持64位)

Sencha Eclipse IDE插件兼容Eclipse Luna和Mars，同时对新版本如Neon也支持的非常好。

注意：Eclipse的衍生产品（4.4版本以上）如Spring Tools Suite,Myeclipse和Rational Application Developer 也应该可以正常运作。Sencha只测试和支持官方的Eclipse发行版本。如果你在使用如上衍生产品时遇到问题，请到Sencha Eclipse Plugin forum上进行提交问题报告。地址如下：

https://www.sencha.com/forum/forumdisplay.php?143-Eclipse-Plugin

从eclipse市场安装指南

从市场下载安装将会开启插件的自动更新当有新版本发行时。

1.打开eclipse

2.打开sencha 的IDE插件地址：

http://marketplace.eclipse.org/content/sencha-eclipse-plugin

3.拖动install(安装)按钮到eclipse

4.确保已经选择了Sencha Eclipse插件，并点击 confirm(确认)

5.接受协议条款并点击 finish(完成）。

6.安装过程中，你可能会遇到一些特殊的窗体，仅仅点击OK继续安装即可。

7.当有提示重启的时候就重启eclipse

下载安装包本地安装

从客户支持门户网站下载zip归档文件进行本地安装。

1.下载Eclipse IDE插件归档文件：

https://support.sencha.com/

2.打开eclipse

3.进入Help(帮助)->Install NewSoftware(安装新软件)

4.点击Add(新增)按钮

5.点击Archive(归档)按钮，并选择下载到的zip归档文件

6.选择临近Sencha EXTJS Plugin项的复选框checkbox

7.两次点击next下一步

8．选择同意协议并点击Finish完成。

9. 安装过程中，你可能会遇到一些特殊的窗体，仅仅点击OK继续安装即可。

10.重启eclipse使安装生效。

更新指南

如果你已经从marketplace市场安装到了插件，更新是很简单的事情。默认的，eclipse将会每周进行一次更新检查，但是你也可以强制IDE检查新版本。

1.在eclipse中，进入Help(帮助)->Check for Updates检查更新

2.如果有IDE插件展现，确保选择它

1.点击next下一步继续更新操作

2.接受协议并点击finash完成

3. 安装过程中，你可能会遇到弹出窗体，仅仅点击OK继续安装即可。

4. 重启eclipse使安装生效。

3.如果没有出现sencha插件，你需要卸载并重新安装插件。

1. 进入Help(帮助)->InstallDetails (安装详情)

2.选择SenchaEclipse插件

3.选择卸载uninstall

4.点击finish完成，当出现重启的时候点击yes重启，

5.按照上面安装的步骤进行安装。

许可

Sencha Eclipse Plugin是Ext JS 产品包中的一部分，需要由许可才可以使用。

一个全功能的30天试用的插件是可以使用的，并且将会绑定到Sencha论坛ID。

在Eclipse IDE启动的时候，你将会看到注册窗口：

输入论坛的ID和密码点击OK。

如果你已经有许可激活码，插件将会被注册，并且试用/许可通知会出现。

如果你是开始试用，插件将会出现提醒你试用到期时间。

如果你的试用期限到期，插件将会弹出一个激活码窗体。

如果你购买了激活码但还没有使用，点击Already Have a license key? 来打开激活窗口。

输入ID，密码和购买的激活码。一旦你绑定后就不需要再激活了。

如果你还没有注册一个试用/有效账号或者30天期限之后，Sencha Eclipse插件功能就不可以使用了。想要注册或者激活插件，进入Preferences->sencha,选择注册你的副本Register your copy

许可证是对机器而言的，在一台电脑上的多个eclispe版本会共用一个许可证，只需注册一个，其它都可以使用。在一个注册后，在其它打开时会看到注册人和试用期限。

注意：如果是不能联网或者是代理上网连接不到证书服务器，你可以联系sencha支持或者发邮件到 activations@sencha.com获取一个授权文件。

特性

Sencha IDE Plugin 是一个丰富的功能并且容易使用的插件。特性包括：

代码补全，打开定义，文档查看，运行配置，创建向导。

现在逐个看这些特性。

代码补全

这个特性允许你猜测输入的可能变量，这个对任何一个框架都支持，包括：

所有的Extjs和用户类的Config配置，method方法，property names属性名称。

组件的事件，像 on..,mon...,un...,mun...和对象的listneners;

以cls结尾的所有配置属性或方法中的CSS类名称。

在controllers控制器中的有别称的this.lookupReference(..)

Controller方法中的监听器：{（event事件）：（方法名称methodName）}和配置属性处理。

Ext.grid.Column.dataindex的Model/Store域

绑定属性中的ViewModel中的属性。

当在工程中编辑一个js文件时，control+space将会带出代码补全窗口。这代码补全使用sencha的mix和eclipse对代码补全的标准输出。Sencha的结果将会有一个相对较高的分组和顶部展示。

注意：一个自然特性定义和管理一个既定的工程和一个特定的插件之间的关系。

打开定义

Sencha Eclipse插件继承自Eclipse中的javascript插件编辑器，允许用户打开ExtJS和Touch类定义变量源码的位置。

这功能将会打开除了ExtJS和TouchSDK之外的用户定义的源码。

当在工程中编辑一个JavaScript文件时，光标定位到需要查看源码的地方，按shift+F3就可以进入查看。Eclipse以新的JavaScript编辑器窗口打开。

注意：快捷键可以通过Eclips的首选项preferences窗口进行修改，在general->keys查找sencha extjs即可进行修改。

文档查看

插件也运行用户打开用户正在编辑的sencha API的文档。

当在工程中编辑一个JavaScript文件时，将光标定位到合适的元素，F1键查看文档，文档在新窗口打开。

如果没有找到对应的文档，默认打开root SDK文档，如：

https://docs.sencha.com/extjs/6.0/6.0.0­

https://docs.sencha.com/extjs/6.0/6.0.0­classic/

注意：F1快捷键可以在eclipse中进行修改。

创建导向

Sencha eclipse IDE插件运行用户通过向导创建以下任何一项：

Ext JS App(从已存在的eclipse工程中)

Ext JS App Project(创建新工程)

Ext JS工作空间/Ext JS工作空间项目

Ext JS 类

Ext JS包

Ext JS视图包

你可以通过file(文件)->new（新建）菜单按钮进入以上任何一个项目的创建向导，也可以通过项目视图右键出现。有时根据上下文或者Sencha环境在当前工程中加入。

打开一个已经存在的 Ext JS应用或者工作空间

打开一个已存在的项目很简单：

1.File文件菜单中选择 import(导入)

2.General-File system,除非有特定的合适工程你可以按照工程导入。

3.定位到本地项目工作空间，导入

4.选定工程项目文件名称

5.决定一个需要导入的工程文件夹，点击完成Finish.

6.一旦你项目工程导入完成，你可以右键点击‘add sencha nature’。这就可以允许代码补全等功能。你可以选择增加或者删除 sencha nature.

注意：新增sencha nature将会对项目进行索引，这个过程会耗费一点时间。

生成一个工作空间

注意：生成工作空间需要安装好Sencha CMD

使用这个特性将会创建一个工作空间。如果你想增加一个Ext JS应用到存在的一个Eclipse工程中，使用‘New Ext JS App’

1.点击File文件->new新建->project工程

2.选择sencha来产生Ext JS App 工程。

3.选择Ext JS App Project 点Next下一步（双击选择也可以）

4.你将会看到一个工程名字输入，CND安装路径和SDK存放路径的区域。

5.你输入好正确的以上路径后，你可以看到Toolkit下拉选择项。有universal/classic/modern选项（Ext JS6及以上版本）

你也将选择一个主题theme根据你选择的框架framwork。

6.点击完成结束项目的创建。

注意：一旦项目工程创建好了，会默认的进行索引index,这会耗费一些时间。根据机器不同耗费时间也不一样。这个处理可以发送到后台进行，你可以同时进行项目的工作。在插件indexing索引的时候，自动补全功能是暂时不可以使用的。

创建新应用工程

注意：生成新应用工程需要安装好Sencha CMD

这个操作会在你的工作空间中生成一个新的eclipse工程。如果你在已有工程中添加一个ExtJS应用工程，使用new Ext JS App 新建ExtJS App.

1.点击 File 文件->New新建->Project工程

2.点击Sencha展示Ext JS App 工程Project

3.选择Ext JS App Project 并单击Next下一步(双击选择也可以)

4.现在就会看到输入工程名称的区域，选择cmd和sdk路径

5.一旦指定好cmd和SDK的路径之后，你就可以下拉选择universal或者classic或者modern(ExtJS6以上)

6.点击完成，结束工程创建。

注意：一旦项目工程创建好了，会默认的进行索引index,这会耗费一些时间。根据机器不同耗费时间也不一样。这个处理可以发送到后台进行，你可以同时进行项目的工作。在插件indexing索引的时候，自动补全功能是暂时不可以使用的。

创建新应用

注意：生成新应用工程需要安装好Sencha CMD

这个操作不会在工作空间中生成一个新的eclipse工程，但是会在已经生成的工程中产生一个app。这可以是在一个Ext JS工作空间中，一个动态的web工程中或者任何一个其它工程中。

1.在项目浏览器中右击工程文件夹

2.选择File文件->new新建->Other其它

3.展开sencha目录，选择Ext JS App Project工程。

4.选择ExtJS App并且点击Next下一步（双击选择也可）

5. 现在就会看到输入工程名称的区域，输入cmd和sdk路径已经app名称，父文件夹。1.如果在Ext JS工作空间中创建的话，可以选择使用工程的SDK还是新制定一个SDK

6.也有可以选择是否运行并创建配置的选项，或者是在子文件夹中生成这个app名称的应用。如果想直接在目录下生成，则不勾选‘create folder for appname’选项。

7. 一旦指定好cmd和SDK的路径之后，你就可以下拉选择universal或者classic或者modern(ExtJS6以上)

8.点击Finish完成应用的创建。

注意：一旦项目工程创建好了，会默认的进行索引index,这会耗费一些时间。根据机器不同耗费时间也不一样。这个处理可以发送到后台进行，你可以同时进行项目的工作。在插件indexing索引的时候，自动补全功能是暂时不可以使用的。

Sencha  App Watch 监控

插件支持sencha CMD的appwatch命令。

当创建一个新的Ext JS App Project 工程的时候，插件会创建一个配置去运行sencha app watch.

当创建非工程的Ext JS App时，也会有选择项选择是否创建app watch运行配置。

加载运行配置

一旦应用创建好了，你就可以轻松的在web服务中运行sencha app watch。

加载sencha app watch只需要：

1.选择 run->run configurations..(确保是在javascript资源视图下)

2.在senchaapp watch目录下选择合适的工程配置

3.点击run运行开始sencha app watch

4.在consol视图中就可以看到sencha cmd的输出并且应用可以通过 http://localhost:1841进行访问了。

一旦你运行过一次sencha app watch configuration，再次启动就会变得很容易。Run-run history菜单或者通过运行下拉菜单就可以找到：

编辑运行配置

1.选择 run->run configurations..(确保是在javascript资源视图下)

2.展开senchaapp watch目录

3.选择期望编辑的配置，或者双击新建一个配置

4.输入一个合法的名称，app目录，sencha cmd目录。

5.如果是一个Ext6 universal app下拉选择合适的build name

6.如果使用sencha inspector 你也可以选择‘allow connection from sencha inspector’来开启app watch的inspector集成。

（推荐）从eclipse中排除Ext JS SDK的javascript解析

注意：这个在eclipse工程中有javascript环境中是被强烈推荐的。

如果你在工程中包含了Ext JS SDK,工程会校验javascript,像eclipse动态web工程已于，eclipse会尝试校验SDK，这会消耗电能内存降低eclipse性能。

通过eclipse的javascript配置阻止eclipse校验Ext JS SDK是极好的体验。

1.从项目菜单中禁止‘build automatically’

2.右键eclipse工程，选择propertie属性

3.展开javascript选择includepath

4.选择source tab页签

5.在你的webcontent列表中双击excluded路径

6.单击临近exclusion patterns中的add增加...

7.在新对话框中单击browse浏览...

8.展开新创建的app选择ext文件夹。

9.选择OK结束

10.如果希望build automatically的话再重新开启即可。

控制索引哪些文件

插件通过索引提供了代码补全，你可以通过编辑（工程根目录）/.sencha/ide/config.json文件来控制哪些可以被索引。这个文件是自动创建的。

它包含如下属性：

Include: 一个数组包含了工程之外的可以被索引的文件。路径可以是绝对路径也可以是相对于工程的相对路径。

Exclude:不被索引的数组列表，可以是相对路径或者绝对路径。

Apps:一个描述每个app的位置的数组。只列出不使用cmd生成的项目的app,通过app创建的会自动被探测到。

配置例子如下：

"include":  [

"path/to/dir/to/include"  //  onwindows  use  "path\\to\\include"

],

"exclude":  [

"path/to/dir/to/exclude"  //  onwindows  use  "path\\to\\include"

],

"apps"  :  [

{

"name":  "AppRootNamespace",

"path":  "path/to/app",   // on  windows  use "path\\to\\app"

"toolkit":  "classic|modern",  // omit this  property  for universal  Ext  JS  6

"sdk":  {

"path":  "path/to/sdk",  // on windows  use  "path\\to\\sdk"

"version":  "6.0.1",  // the version  of  the sdk  used  by your app

"framework":  "extjs"  // or "touch"  for  Sencha Touch  apps

}

}

]

}

我们强烈建议使用相对路径，这个可以在源码控制中和其它成员共享。

注意：6.0.3之前的版本这个文件叫.sencha-ide-config并且在root目录下，6.0.3版本就自动集成到文件.sencha/ide/config.json

支持和反馈

到senchaplugin forum中去提问题，报告bug和提出意见。

在IDE中通过Help-senchaext js plugin feedback也可以进入反馈。