Sencha Eclipse 插件

Sencha Eclipse 插件简介

Sencha 的 Eclipse IDE 插件是一个集成开发环境工具，它在 Sencha 框架和 Eclipse 软件之间创建了交汇点。此集成以代码补全的形式出现，同时与本机 Eclipse 行为无缝配合。

Sencha 专家会喜欢重构更改的轻松程度，以及追踪代码到源代码的简单程度。

Sencha 初学者将受益，因为 Eclipse 插件在鼓励最佳实践代码结构和语法的同时提供补全建议。

安装

要求

1. Eclipse 2022-12 (4.26.0) 或 2023-03 (4.27.0) IDE，适用于企业 Java 和 Web 开发人员

2. Sencha Cmd 6+（可选 - 创建和运行 Sencha 应用程序时需要）

   • https://www.sencha.com/products/sencha-cmd/

3. Ext JS 4.2.+

   • http://www.sencha.com/products/extjs

4. 受支持的操作系统

   • Windows 10 或更高版本（64 位）

   • Mac OSX

   • Linux（仅限 64 位）

Sencha Eclipse IDE 插件与 Eclipse 2022-09 及更高版本兼容。

注意：虽然源自 Eclipse Luna (4.4+) 的产品（如 Spring Tools Suite、MyEclipse 和 Rational Application Developer）应该可以工作，但 Sencha 仅测试和支持官方 Eclipse 版本。如果您确实遇到与这些其他产品兼容性的问题，请在 Sencha Eclipse 插件论坛 上报告这些问题。

安装说明

从 Eclipse Marketplace

从 Eclipse Marketplace 安装将启用自动更新（在发布时）。

1. 打开 Eclipse

2. 打开 Sencha Eclipse 插件页面

3. 将 Marketplace 中的安装按钮拖动到 Eclipse IDE

4. 确保已选择 Sencha Eclipse 插件，然后单击“确认”

5. 根据需要接受许可协议的条款，然后单击“完成”

6. 在安装过程中，您可能会遇到有关未签名内容的窗口。只需单击“确定”即可继续安装

7. 在提示时重新启动 Eclipse

从下载

从支持门户下载的 zip 归档文件进行安装时。

1. 下载 Eclipse IDE 插件（从 支持门户）

2. 打开 Eclipse

3. 转到帮助->安装新软件

4. 单击“添加”按钮

5. 单击“归档”按钮，指向 Eclipse IDE 插件 zip 文件

6. 选择“Sencha ExtJS 插件”项旁边的结果复选框

7. 单击“下一步 >”两次

8. 根据需要接受许可协议的条款，然后单击“完成”

9. 在安装过程中，您可能会遇到有关未签名内容的窗口。只需单击“确定”即可继续安装

10. 重新启动 Eclipse 以使更改生效

此时，您应该能够开始使用 Sencha Eclipse 插件

更新说明

如果您已从 Marketplace 安装了 Sencha Eclipse 插件，则更新很容易。

默认情况下，Eclipse 每周检查一次插件更新，但您可以强制 IDE 检查新版本

1. 在 Eclipse 中，转到帮助 -> 检查更新

2. 如果显示 Sencha Eclipse 插件，请确保已选择它

   1. 根据需要单击“下一步 >”以继续执行向导

   2. 根据需要接受许可协议的条款，然后单击“完成”

   3. 在安装过程中，您可能会遇到有关未签名内容的窗口。只需单击“确定”即可继续安装

   4. 重新启动 Eclipse 以使更改生效

3. 如果未列出 Sencha 插件，您需要卸载插件并重新安装。

   1. 转到帮助 -> 安装详细信息

   2. 选择 Sencha Eclipse 插件

   3. 单击卸载

   4. 在要求重新启动 Eclipse 时单击完成和是

   5. 按照上述 Marketplace 安装说明 进行操作

许可

Sencha Eclipse 插件是 Ext JS Pro 和 Premium 套件的一部分，需要有效的许可证才能使用。

提供插件的 30 天全功能试用版，并将与您的 Sencha 论坛 ID 绑定。

在启动您首选的 Eclipse IDE 时，将向您显示注册对话框

输入您的 Sencha 论坛 ID 和密码。

单击确定后

• 如果您已经拥有有效的许可证，您的插件将被注册，试用/许可证通知将消失。

• 如果您正在开始或恢复试用，插件将通过气球通知和项目窗口右下角的状态栏更新通知您试用剩余天数。

• 如果您的试用已过期，插件将通过激活窗口提示您输入激活码。

如果您购买了许可证但尚未使用激活码，请点击“已有许可证密钥？”打开激活窗口。

输入您从许可证购买中收到的 Sencha 论坛 ID、密码和激活码。
一旦您的帐户与许可证相关联，您以后就不需要激活插件了。

如果您未注册试用或有效帐户，或者您的试用已超过 30 天，Sencha Eclipse 插件功能将被禁用。要注册或激活您的插件，请转到

Preferences->Sencha 

然后您可以点击“注册您的副本”。

该许可证对您机器上的多个 Eclipse 产品有效。如果您注册了一个产品（例如 Eclipse Mars），当您打开 Eclipse Luna 时，您将无需再次注册或登录。相反，它将使用您现有的试用或付费许可证。您将看到一个对话框，告知您插件注册给谁、试用剩余天数（如果适用）以及报告匿名统计信息的选项。

关闭此对话框后，您将不再在此 IDE 中看到它。您使用的任何其他新 Eclipse IDE 都将在首次启动时显示此对话框一次。

注意：如果您处于离线状态或处于代理后面并且无法连接到 Sencha 的许可服务器，请联系 Sencha 支持 或 [email protected] 以获取许可证文件。

功能

Sencha Eclipse IDE 插件功能丰富，使用简单。功能包括

• 代码补全

• 打开定义

• 文档查找

• 运行配置

• 向导创建

让我们逐一了解这些功能。

代码补全

让我们从 Sencha Eclipse IDE 插件最方便的功能之一代码补全开始了解该插件的优势。此功能允许您接收适合可见性范围的补全建议。这适用于几乎任何框架项，包括

• 所有 Ext JS 和用户类的配置、方法和属性名称

• 别名属性的值，例如 xtype、控制器、viewModel、布局等

• Component.on、.mon、.un、.mun 和侦听器对象中的事件名称

• 所有以“cls”结尾的配置属性和方法中的 CSS 类名称

• 带有别名的控制器中的 this.lookupReference(…)

• 侦听器中的控制器方法：{ (event): (methodName) } 以及处理程序配置属性

• Ext.grid.Column.dataIndex 的模型/存储字段

• 绑定配置中 ViewModel 的属性

在具有 Sencha Nature 的项目中编辑 JavaScript 文件时，键入 control+space 将调出自动补全窗口。Eclipse 中的自动补全将根据正在补全的内容使用 Sencha 和标准 Eclipse 结果的组合。Sencha 结果将具有更高的相关性，并分组到结果的顶部。

注意：Nature 定义并管理给定项目与特定插件或功能之间的关联。

打开定义

Sencha Eclipse 插件扩展了 Eclipse JavaScript 编辑器，并允许用户打开 Ext JS 和 Touch 类中各种元素/属性的定义源代码。

此功能将打开用户生成的源代码以及 Ext JS 和 Touch SDK 源代码。

在具有 Sencha Nature 的项目中编辑 JavaScript 文件时，将光标移动到您要打开定义的位置，然后按 Shift + F3。源代码将在新的 Eclipse JavaScript 编辑器窗口中打开。

注意：此键盘快捷键可以通过 Eclipse 的首选项进行更改；只需在

General > Keys.

文档查找

Sencha Eclipse 插件还允许用户打开与正在编辑的代码相关的 Sencha API 文档。

在具有 Sencha 特性的项目中编辑 JavaScript 文件时，将光标移动到适当的元素，然后按 F1 键。相应的 Sencha API 文档将在新的外部浏览器窗口中打开。

如果找不到相关的 API 文档，它将默认为应用程序中找到的 SDK 版本的 API 文档根目录（例如 https://ext.js.cn/extjs/6.0/6.0.0-classic/）

注意：此键盘快捷键可以通过 Eclipse 的首选项进行更改；只需在

General > Keys.

向导创建

Sencha Eclipse IDE 插件允许用户从标准 Eclipse 向导创建以下任何项目

• Ext JS App（适用于现有的 Eclipse 项目）

• Ext JS App 项目（将创建一个新的 Eclipse 项目）

• Ext JS 工作区/Ext JS 工作区项目

• Ext JS 类

• Ext JS 包

• Ext JS 视图包

您可以通过“文件”>“新建”菜单选项或在“项目资源管理器”视图中右键单击来访问上述项目的创建。某些项目会根据上下文显示，或者如果 Sencha 特性当前已添加到项目中。

打开现有的 Ext JS 应用程序或工作区

您可以通过 IDE 轻松打开现有的 Ext JS 应用程序或工作区，只需

1. 从“文件”菜单中选择“导入”

2. 接下来，选择“常规->文件系统”，除非有更合适的项目类型更适合您的需求。

3. 找到并选择您的工作区或应用程序已驻留的目录。

4. 选中项目名称旁边的结果复选框

5. 确定要导入项目的“到文件夹”并单击“完成”

6. 导入项目后，您可以右键单击包含的文件夹并单击“添加 Sencha 特性”。Sencha 特性是一种 Eclipse 特性，可启用代码完成和其他 Sencha 行为。用户还可以右键单击“项目资源管理器”中的项目，并根据需要选择“添加 Sencha 特性”或“移除 Sencha 特性”。

注意：将 Sencha 特性添加到项目中会导致它默认进行索引。此过程可能需要一到两分钟，具体取决于您的计算机和项目。

生成新的工作区项目

注意：这需要安装Sencha Cmd。

这将在您的工作区中创建一个新的 Eclipse 项目。如果您想在退出 Eclipse 项目中创建一个工作区，请使用“新建 Ext JS 工作区项目”

1. 单击“文件”->“新建”->“项目”。

2. 单击 Sencha 以显示 Ext JS 工作区项目。

3. 选择 Ext JS 工作区项目并单击“下一步 >”（或双击您的选择）。

4. 现在，您将看到一个区域，用于提供项目名称、Cmd 安装位置和 SDK 位置（可选）。

5. 为 Cmd 和 SDK 提供有效的路径后，单击“完成”以完成工作区创建。

   

6. 您的工作区将默认生成并进行索引。此过程可能需要一到两分钟，具体取决于您的计算机。

7. 现在，您可以通过右键单击项目中的任意位置并选择“新建应用程序”或“文件->新建...”并选择“新建 Ext JS 应用程序”将新的 Ext JS App 项目添加到工作区

生成新的应用程序项目

注意：这需要安装Sencha Cmd。

这将在您的工作区中创建一个新的 Eclipse 项目。如果您想在退出 Eclipse 项目中添加 Ext JS 应用程序，请使用“新建 Ext JS 应用程序”

1. 单击“文件”->“新建”->“项目”。

2. 单击 Sencha 以显示 Ext JS App 项目。

3. 选择 Ext JS App 项目并单击“下一步 >”（或双击您的选择）。

4. 现在，您将看到一个区域，用于提供项目名称、Cmd 安装位置和 SDK 位置。

5. 为 Cmd 和 SDK 提供有效的路径后，您将看到工具包选择的下拉菜单，其中包括“通用”、“经典”和“现代”（仅限 Ext JS 6+）。

   您还可以根据所选框架的版本选择主题。

   

6. 单击“完成”以完成 App 项目创建。

注意：应用程序生成后，它将默认进行索引。此过程可能需要一到两分钟，具体取决于您的机器。虽然索引是一个处理器密集型任务，可能会降低性能，但您可以在继续工作的同时将此过程发送到后台。Sencha 自动完成在插件索引时处于禁用状态。

生成新应用程序

注意：这需要安装Sencha Cmd。

这不会在您的工作区中创建一个新的 Eclipse 项目，而只会创建一个现有 Eclipse 项目中的应用程序。这可以位于现有的 Ext JS 工作区、动态 Web 项目或您选择的任何其他项目中。

1. 右键单击项目资源管理器中的项目或文件夹。

2. 选择文件 -> 新建 -> 其他...

3. 展开 Sencha 类别以显示 Ext JS 应用程序项目。

4. 选择 Ext JS 应用程序，然后单击下一步 >（或双击您的选择）。

5. 现在，您将看到一个区域，用于提供父文件夹、应用程序名称、Cmd 安装位置、SDK 位置。

   1. 如果您在现有的 Ext JS 工作区中创建应用程序，您将可以选择使用工作区的一个 SDK，或添加一个新的 SDK。

6. 还有复选框用于控制是否创建新的应用程序监视运行配置，或是否应该在应用程序名称的子文件夹中创建应用程序。

   1. 如果您想直接在您选择的文件夹中创建应用程序，请取消选中“为应用程序名称创建文件夹”复选框。

7. 一旦您为 Cmd 和 SDK 提供了有效的路径，您将看到用于工具包选择的下拉菜单，其中包括“通用”、“经典”和“现代”（仅限 Ext JS 6+）。您还可以根据您选择的框架版本选择一个主题。

   

8. 单击“完成”以完成 App 项目创建。

注意：应用程序生成后，它将默认进行索引。此过程可能需要一到两分钟，具体取决于您的机器。虽然索引是一个处理器密集型任务，可能会降低性能，但您可以在继续工作的同时将此过程发送到后台。Sencha 自动完成在插件索引时处于禁用状态。

Sencha 应用程序监视

Sencha Eclipse 插件支持运行 Sencha Cmd 的“应用程序监视”。

使用向导创建新的 Ext JS 应用程序项目时，该插件将创建一个运行配置（如果是通用应用程序，则创建两个运行配置）来运行 Sencha 应用程序监视。

在创建非项目的新 Ext JS 应用程序时，也有一个复选框选项用于创建应用程序监视运行配置。

启动运行配置

生成应用程序后，您可以轻松启动 Sencha 应用程序监视，以使用 Cmd Web 服务器开始开发。

启动 Sencha 应用程序监视

1. 选择运行 -> 运行配置...（确保您处于 JavaScript 透视图中）。

2. 在 Sencha 应用程序监视类别下，为您的特定应用程序（以及适用的工具包）选择适当的运行配置。

3. 现在，您可以单击“运行”以开始 Sencha 应用程序监视。

4. 现在，您将在控制台视图中看到 Sencha Cmd 的输出，并且您的应用程序将在 http://localhost:1841 处可用

执行 Sencha 应用程序监视配置后，您可以轻松地从运行 -> 运行历史记录菜单或工具栏中的绿色运行图标下拉菜单中再次运行它

编辑运行配置

您可以创建新的应用程序监视运行配置或编辑现有的应用程序监视运行配置

1. 选择运行 -> 运行配置...（确保您处于 JavaScript 透视图中）

2. 展开 Sencha 应用程序监视类别

3. 选择您要编辑的运行配置，或双击 Sencha 应用程序监视类别以创建新的运行配置

4. 输入有效的名称、应用程序目录和 Sencha Cmd 路径。应用程序和 Cmd 路径将得到验证

5. 如果应用程序是 Ext 6 通用应用程序，请从下拉菜单中选择适当的构建名称

6. 如果您正在使用 Sencha Inspector，您还可以选中“允许来自 Sencha Inspector 的连接”以启用应用程序监视的 Inspector 集成

从 Eclipse 的 JavaScript 解析中排除 Ext JS SDK（推荐）

注意：强烈建议对具有 JavaScript 特性的 Eclipse 项目执行此操作。

如果您将 Ext JS SDK 包含在将尝试构建和验证 JavaScript 的项目中，如 Eclipse 动态 Web 项目，Eclipse 将尝试验证 SDK，这可能会降低环境速度。

最好从 Eclipse 的 JavaScript 配置中排除 Ext JS SDK，以防止出现任何问题

1. 从“项目”菜单中禁用“自动构建”。

2. 右键单击 Eclipse 项目，选择“属性”

3. 在左侧展开“JavaScript”，然后选择“包含路径”。

4. 选择“源”选项卡。

5. 双击 WebContent 列表下的“排除路径”。

6. 单击排除模式旁边的底部“添加...”：视图

7. 在新的对话框中单击“浏览...”

8. 展开新创建的应用程序，然后选择其中的 /ext/ 文件夹。

9. 单击“确定”，单击“完成”

10. 现在，您可以重新启用“自动构建”（如果您愿意）。

控制要索引的文件

该插件通过索引 JavaScript 源文件来提供代码完成功能。您可以通过编辑 (project_root)/.sencha/ide/config.json 来控制要索引的文件。该文件由插件自动创建，并包含以下属性

• include - 应索引的项目目录之外的目录数组。路径可以相对于项目根目录或绝对路径。
• exclude - 要从索引中排除的目录数组。路径可以相对于项目根目录或绝对路径。
• apps - 描述项目中每个应用程序位置的数组。如果应用程序不是使用 Sencha Cmd 构建的，则只需在此处列出应用程序。使用 Cmd 构建的任何应用程序都将自动检测到。

以下是 config.json 文件的示例

{
    "include": [
        "path/to/dir/to/include" // on windows use "path\\to\\include"
    ],
    "exclude": [
        "path/to/dir/to/exclude" // on windows 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+ apps
            "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，位于项目的根目录中。版本 6.0.3 自动将此文件迁移到 .sencha/ide/config.json。

支持和反馈

使用 Eclipse 插件论坛 提问、报告问题和提供反馈。

也可以通过以下方式从 IDE 内访问论坛

Help -> Sencha Ext JS Plugin Feedback

如果发生未知错误，用户将看到一个对话框，解释错误并提供向 Sencha 报告错误的选项。

发行说明和时间表

Eclipse 插件 6.0.6 - 2023 年 3 月 29 日

• 升级以支持 Eclipse 2022-09 和 2022-12。

• 修复支持 Cmd 和 Ext 7.6+ 的错误

Eclipse 插件 6.0.5 - 2019 年 2 月 6 日

• 添加对 ExtJS Open Tooling (ext-gen) 项目的支持。

• 修复有关 Cmd 6.5+ 配置文件的小错误。

Eclipse 插件 6.0.4 - 2016 年 7 月 27 日

此版本包括与代码完成功能相关的性能改进和内部错误修复。

Eclipse 插件 6.0.3 - 2016 年 3 月 17 日

• ECP-149 - 放宽 Eclipse 功能/插件版本依赖性

• ECP-156 - 标准化用户项目中的 Sencha 占用空间

Eclipse 插件 6.0.2 - 2016 年 1 月 12 日

Eclipse 插件 6.0.1 - 2015 年 12 月 9 日

Eclipse 插件 6.0.0 - 2015 年 12 月 2 日