Sencha Visual Studio 插件
许多类在使用配置对象创建（实例化）类时，具有使用的快捷名称。快捷名称称为别名（如果类扩展 Ext.Component，则称为xtype）。对于适用的类，别名/xtype 列在类名称旁边以供快速参考。
框架类或其成员可以指定为private或protected。否则，类/成员为public。Public、protected和private是访问描述符，用于传达如何以及何时使用类或类成员。
Public 类和类成员可供任何其他类或应用程序代码使用，并且可以依赖它们在主要产品版本中稳定且持久。公共类和成员可以通过子类安全地扩展。
Protected 类成员是稳定的public成员，旨在供拥有类或其子类使用。受保护的成员可以通过子类安全地扩展。
Private 类和类成员由框架内部使用，不打算供应用程序开发人员使用。私有类和成员可能会随时更改或从框架中省略，恕不另行通知，不应依赖于应用程序逻辑。
static标签。*参见下面的静态。下面是一个示例类成员，我们可以对其进行剖析以显示类成员的语法（在这种情况下，从 Ext.button.Button 类中查看的 lookupComponent 方法）。
让我们看看成员行的每一部分
lookupComponent）( item )）Ext.Component）。对于不返回 undefined 之外的任何内容的方法，可以省略此项，或者可以显示用正斜杠 / 分隔的多个可能值，表示返回的内容可能取决于方法调用的结果（即，如果 get 方法调用成功，则方法可能返回 Component，如果失败，则返回 false，将显示为 Ext.Component/Boolean）。PROTECTED - 请参阅下面的标志部分）Ext.container.Container）。如果成员源自当前类，则源类将显示为蓝色链接；如果成员是从祖先或混合类继承的，则源类将显示为灰色。查看源）item : Object）列出。undefined，则“返回”部分将记录返回的类或对象类型以及描述（在此示例中为 Ext.Component）自 3.4.0 起可用 - 示例中未显示）默认为：false）API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。
classInstance.method1().method2().etc();false，则不会触发- 表示框架类
- 单例框架类。*有关更多信息，请参见单例标志
- 组件类型框架类（Ext JS 框架中扩展 Ext.Component 的任何类）
- 表示当前查看的版本中类、成员或指南是新的
- 表示类型为 config 的类成员
- 表示类型为 property 的类成员
- 表示类型为 method 的类成员
- 表示类型为 event 的类成员
- 表示类型为 theme variable 的类成员
- 表示类型为 theme mixin 的类成员
- 表示当前查看的版本中类、成员或指南是新的
在 API 文档页面上类名称正下方是一行按钮，对应于当前类拥有的成员类型。每个按钮按类型显示成员数（此计数在应用筛选器时更新）。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示一个弹出菜单，其中包含该类型的所有成员，以便快速导航。
与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中，位于其处理的配置正下方。Getter 和 Setter 方法文档将位于配置行中，以便于参考。
您的页面历史记录保存在本地存储中，并显示在顶部标题栏正下方（使用可用空间）。默认情况下，仅显示与您当前查看的产品/版本匹配的搜索结果。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来扩展显示内容。这将在历史记录栏中显示所有产品/版本的所有近期页面。
在历史记录配置菜单中，您还将看到最近访问的页面列表。结果按“当前产品/版本”和“全部”单选按钮进行筛选。单击 按钮将清除历史记录栏以及保存在本地存储中的历史记录。
如果在历史记录配置菜单中选择了“全部”，则将启用“在历史记录栏中显示产品详细信息”复选框选项。选中后，每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上还将显示产品/版本作为工具提示。
可以使用页面顶部的搜索字段搜索 API 文档和指南。
在 API 文档页面上，还有一个筛选器输入字段，它使用筛选器字符串筛选成员行。除了按字符串筛选外，您还可以按访问级别、继承和只读筛选类成员。这是使用页面顶部的复选框完成的。
API 类导航树底部的复选框筛选类列表，以包括或排除私有类。
单击空搜索字段将显示您最近的 10 次搜索，以便快速导航。
每个 API 文档页面（除了 JavaScript 原语页面）都有一个与该类相关的元数据的菜单视图。此元数据视图将具有以下一个或多个
Ext.button.Button 类有一个备用类名 Ext.Button）。备用类名通常用于向后兼容。可运行示例（小提琴）默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。
类成员默认在页面上折叠。您可以使用成员行左侧的箭头图标展开和折叠成员，或全局使用展开/折叠所有切换按钮（右上角）。
在较窄的屏幕或浏览器上查看文档将导致针对较小的尺寸优化视图。桌面和“移动”视图之间的主要区别是
可以通过单击 API 文档页面顶部的类名来查看类源。可以通过单击成员行右侧的“查看源”链接来查看类成员的源。
我们针对 Visual Studio 插件的目标是简化使用 Sencha Ext JS 和 Microsoft Visual Studio IDE 的开发人员的开发流程。Visual Studio 插件通过提供代码完成、代码导航和代码生成等功能，帮助开发人员更快地构建 Ext JS Web 应用程序。
Microsoft Visual Studio 2013、2015 或 2017，企业版、专业版、旗舰版或社区版
Sencha Cmd 6+（可选 - 创建和运行 Sencha 应用程序所需）
Ext JS 4.2.+ 或 Sencha Touch 2.1+
安装 Sencha Visual Studio 插件的最简单方法是通过 Microsoft 的 Visual Studio 库直接安装。可以通过转到（工具 > 扩展和更新...）从 Visual Studio 中访问此库。在此处，选择左面板中的“联机”，然后在右上角搜索短语“Sencha”。选择合适的插件，然后单击“下载”并按照说明进行操作。请注意，安装完成后需要重新启动才能开始使用该插件。
Visual Studio 插件使用 Microsoft 的标准 VSIX 文件扩展名安装到兼容版本的 Visual Studio 中。下载 VSIX 文件后，只需运行它（双击它），然后按照安装向导中的步骤进行操作。
注意：您可以在任何时候从 Visual Studio 中禁用或卸载插件（工具 > 扩展和更新... > Sencha Visual Studio 扩展）。
Sencha Visual Studio 插件是 Ext JS Pro 和 Premium 套件的一部分，需要有效的许可证才能使用。
提供该插件的 30 天全功能试用版，该试用版将与您的Sencha 论坛 ID绑定。
启动 Visual Studio 后，将显示注册对话框
输入您的 Sencha 论坛 ID 和密码。
单击确定后
如果您已经拥有有效的许可证，您的插件将被注册，试用版/许可证通知将消失。
如果您正在开始或恢复试用版，该插件将通过气球通知和项目窗口右下角的状态栏更新通知您试用版剩余的天数。
如果您的试用版已过期，该插件将通过激活窗口提示您输入激活码。
如果您购买了许可证并且尚未使用您的激活码，请单击“是否已经拥有许可证密钥？”以打开激活窗口。
输入您的 Sencha 论坛 ID、密码和您从许可证购买中收到的激活码。
您的帐户与许可证关联后，您无需在将来激活插件。
如果您未注册试用版或有效帐户，或者您的试用版已超过 30 天，Sencha Visual Studio 插件功能将被禁用。要注册或激活您的插件，请转到
工具 > 选项 > Sencha > 常规
然后单击“立即激活”按钮。
如果您处于离线状态或处于代理后面并且无法连接到 Sencha 的许可服务器，请联系Sencha 支持或[email protected]以获取许可证文件。此文件应放置在以下位置
%LOCALAPPDATA%\Sencha\VSPlugin
Sencha Visual Studio IDE 插件功能丰富且易于使用。功能包括
IntelliSense
工具包识别
定义查找
代码创建
sencha app watch 集成
让我们逐一了解这些功能。
Sencha Visual Studio 插件为 Ext JS 和 Sencha Touch 提供 IntelliSense 支持。建议在以下位置提供
Ext JS 组件实例上的属性和方法
传递给构造函数、Ext.create、Ext.define、Ext.widget 的配置对象中的键，以及带有 xtype 或 xclass 的对象字面量
xtype 和其他别名
侦听器对象中的事件名称，以及 on、mon、un 和 mun 方法
启用“Sencha 插件”的任何项目都有资格获得 IntelliSense 建议和其他代码导航功能。要向任何项目或网站添加“Sencha 插件”支持，只需在解决方案资源管理器中右键单击项目，然后选择“为项目启用 Sencha 插件”命令。从 Visual Studio 中生成的任何 Ext JS 项目都会自动启用“Sencha 插件”支持。
请注意，Visual Studio 2015 具有如上所述的完整 IntelliSense 支持。Visual Studio 2013 在 JavaScript 语言服务中有一个限制，它会阻止在对象字面量中创建 IntelliSense 会话。这意味着在 Ext 类配置对象中 IntelliSense 将不起作用，例如
Ext.create('TestClass', {
// no IntelliSense within this object literal
})
在对象字面量之外（更具体地说，在闭包作用域内）的 IntelliSense 仍然可以在 Visual Studio 2013 中使用和支持。
在使用 Ext JS（仅限 Ext JS 6+）时，插件会根据当前正在编辑的文件的位置自动包含来自正确工具包（经典或现代）的建议。这也适用于基于“app.json”文件中定义的工具包的单个工具包应用程序。
安装了 Sencha Visual Studio 插件后，您可以右键单击以下任何一项（或使用标准 F12 快捷键），然后选择“转到定义”以查看该项的定义。
类名
xtype 和其他类型别名
方法和属性
配置键
事件
一个基本项目类型，其中包含一个 Web API 项目示例，该项目配置为使用 Ext JS 作为前端，可以通过“新建项目”控件（文件 > 新建项目...）获得。请注意，此项目类型支持 Ext JS 6.0.0+ 及更高版本。有关旧版支持，请参阅 Ext JS 网站项目类型或下面的 Ext JS 应用程序项类型。
选择后，应用程序生成向导将显示，如下所示。
为 Sencha Cmd 和 Sencha Ext JS SDK 安装选择有效的位置，然后单击“生成”以继续。
项目创建可能需要大约 2 分钟，具体取决于您的机器。在此期间，将执行以下步骤
sencha generate app
sencha refresh app
TernJS JavaScript 解析
您可以在 Visual Studio 的状态栏中监视这些进程的状态。
完成后，您将拥有一个具有以下结构的示例应用程序
这是一个使用 Web API（例如用于 Web 服务）的 ASP.NET 应用程序，其中内置了一个 Ext JS 应用程序（Sencha 目录）。单击“运行”按钮（或按 Control + F5）以使用 IISExpress 托管的应用程序启动系统 Web 浏览器。
这会创建一个独立的 Ext JS 网站，该网站可以添加到 ASP.NET 项目中。Ext JS 框架要求是 Ext JS 4.2.4+ 和 Sencha Touch 2.1+。要创建新网站，请选择“文件 > 新建 > 新建网站...”。接下来，在左侧面板中，选择“模板 > Visual C#”，最后从主面板中选择“Ext JS 网站”，然后单击“确定”
Ext JS 应用程序生成对话框将出现
输入有效的 Cmd (6+) 和 Ext JS SDK 位置信息，选择一个主题和工具包（如果为 Ext 6+）来创建您的应用程序。然后，Cmd 将如上所述生成您的应用程序。
现在应该存在结果结构
可以通过按 F5 或单击 Visual Studio 工具栏上的绿色“运行”按钮将网站部署到 IISExpress。
除了创建新项目外，还可以将一个或多个 Ext JS 应用程序添加到任何基于 C# 的 Visual Studio 解决方案中。在解决方案打开的情况下，“右键单击”项目，然后选择“添加 > 新建项... > Sencha > 应用程序”
应用程序生成（如上所示）将出现。输入有效的 Cmd 和 Ext JS SDK 位置信息，选择一个主题和工具包（如果为 Ext 6+）来创建您的应用程序。然后，Cmd 将如上所述生成您的应用程序。
现在应该存在结果结构
请注意，使用此项模板，所有与 ASP.NET 或其他技术的配置都留给用户手动执行。
要添加新类（或特定类型的类：模型、存储、视图、控制器等），只需右键单击要创建新类的位置，然后选择
"Add > New Item… > Sencha > Class (or specific type)".
输入您的类名并单击继续。以下是输出示例（请注意，插件提供了正确的名称空间）
还可以从“新建项…”菜单创建查看包。在“视图”文件夹中，只需选择“查看包”并提供名称，然后将显示“查看包”向导
根据需要选中一个、两个或没有一个这些复选框。
将创建以下文件结构
Visual Studio 插件利用 Sencha Cmd 来监视应用程序开发（app watch）和创建 Ext JS 应用程序（generate app）。Visual Studio 使用的 Sencha Cmd 版本可以从此处找到的“选项”面板设置
工具 > 选项... > Sencha > Cmd
生成应用程序后，您可以轻松启动 Sencha App Watch 以使用 Cmd Web 服务器开始开发。
sencha app watch 输出可以在其自己的窗口中显示。它可以通过选择从菜单中显示
View > Other Windows > Sencha App Watch.
再次右键单击 Ext JS 应用程序根目录并选择“停止 Sencha App Watch”，随时停止进程。
注意：对于带 Web API 项目类型的 Ext JS，Sencha Cmd 创建的“index.html”文件将重新定位到 ASP.NET 项目的根目录。当您通过 http://localhost:1841 为此项目运行 sencha app watch 时，您的网站将不可见。相反，请使用 Visual Studio 中内置的“运行”（Ctrl+F5）或“调试”（F5）功能。
该插件通过索引您的 JavaScript 源文件来提供 IntelliSense。您可以通过编辑 (project_root)/.sencha/ide/config.json 来控制要索引的文件。此文件由插件自动创建，并包含以下属性
以下是一个 config.json 文件示例
{
"include": [
"path\\to\\include"
],
"exclude": [
"path\\to\\exclude"
],
"apps" : [
{
"name": "AppRootNamespace",
"path": "path\\to\\app",
"toolkit": "classic|modern", // omit this property for universal Ext JS 6+ apps
"sdk": {
"path": "path\\to\\sdk",
"version": "6.0.1", // the version of the sdk used by your app
"framework": "extjs" // or "touch" for Sencha Touch apps
}
}
]
}
我们建议使用相对路径，以便可以将此文件检入源代码管理并在团队成员之间共享。
可以通过在“解决方案资源管理器”窗口中右键单击“解决方案”树节点，然后从上下文菜单中选择“编辑 Sencha IDE 配置文件”来在 Visual Studio 中快速编辑此文件。此选项仅显示在存在一个或多个“Sencha 启用”项目的解决方案上。
注意：在插件版本 6.0.3 之前，此文件名为 .sencha-ide-config，位于项目的根目录中。版本 6.0.3 自动将此文件迁移到 .sencha/ide/config.json。
默认情况下，插件在每次击键后在 JavaScript 文件中提供 IntelliSense。这可能会影响某些项目和某些计算机上的编辑器的响应能力。如果您遇到性能不佳的情况，请在论坛中告诉我们或联系 Sencha 支持人员。提高编辑器响应能力的一种方法是禁用 JavaScript 文件的自动 IntelliSense，以便仅在您键入 ctrl-space 时才提供代码完成建议。您可以取消选中以下选项来禁用自动 IntelliSense
您还可以取消选中以下选项，在字符串中禁用自动 IntelliSense，同时在其他所有地方启用它
Visual Studio 插件还与 Sencha Inspector 无缝集成。如果您已购买 Inspector 或正在使用试用版，可以通过勾选以下框激活它
Tools -> Options -> Sencha -> Cmd (checkbox)
一旦勾选此框并配置 Inspector，在运行应用程序后，该应用程序将自动与 Inspector 连接。
默认情况下，Sencha 文件夹不包含在项目中。
解决方法
在解决方案资源管理器中，单击：“显示所有文件”
在“Sencha”文件夹上单击右键，然后选择“包含在项目中”
当 Sencha Visual Studio 插件与任何其他尝试使用其他建议增强 IntelliSense 的扩展结合使用时，可能会遇到提供 IntelliSense 建议的问题。一个非常明显的流行扩展是 JetBrain 的 ReSharper。为了保持使用这两个扩展的能力，请参阅 ReSharper 提供的选项 此处。
在极少数情况下，在项目生成期间由 Cmd 生成的负责样式和主题的 CSS 文件将不会“包含”在项目中。此问题仅在 Visual Studio 2015 中出现过少数次。修复方法非常简单。如果您在运行应用程序时它显示没有样式/主题，请使用以下步骤修复由此产生的问题
使用 Visual Studio 插件论坛 提问、报告问题和提供反馈。
我们非常感谢您对改进 Visual Studio 插件的帮助和反馈。请在 Visual Studio 插件论坛上报告错误、问题或错误。我们期待您的反馈。
此版本增加了对 Visual Studio 2017 的支持。
此版本包括性能改进和与 Intellisense 相关的内部错误修复。
MVSP-257 - 修复代码补全无法与从发行渠道下载的插件一起使用的错误
MVSP-230 - 在运行 sencha app watch 时添加一个针对 Fashion 的选项
MVSP-255 - 修复 IntelliSense 在 extend 字段中不起作用的问题
MVSP-249 - 修复无法将应用程序添加到工作区的问题
MVSP-229 - 更新项目模板以适用于 Ext JS 6.5.0 和 Cmd 6.5.0
MVSP-237 - 添加显示日志文件的功能
MVSP-246 - 修复一个问题，以便 Ext 应用程序可运行（Sencha App Watch）
MVSP-236 - 验证 IntelliSense VS2013 支持
MVSP-242 - 修复一个问题，以便用户可以使用 ExtJS 6.5 创建项目
此版本包括性能改进和与 Intellisense 相关的内部错误修复。
MVSP-32 - 为应用程序监视创建工具面板
MVSP-185 - 在创建视图和视图包时提示用户创建 SASS 文件
MVSP-218 - 添加将 Ext JS 工作区附加到其他 Ext JS 应用程序的功能
MVSP-219 - 为 Ext JS ViewPackage 添加预定义名称
MVSP-217 - 关闭解决方案时，“正在解析 JavaScript 文件”消息不会清除
MVSP-212 - 发布项目时，Visual Studio 尝试构建 SDK 包
MVSP-139 - 删除之前的建议后，即时完成失败
MVSP-163 - 监视 Tern 状态文件以进行索引，并在 UI 上显示索引状态
MVSP-108 - 代码建议列表中的过滤不一致
MVSP-119 - 文件更新应在编辑器模糊事件中发送
MVSP-208 - “启动 Ext JS 应用程序”功能
MVSP-210 - 插件不应该允许你将 ExtJS 应用程序添加到另一个 ExtJS 应用程序
MVSP-214 - 改进有关无效 ExtJS 应用程序路径的错误消息
MVSP-179 - 将 Sencha Cmd 集成到构建和/或发布过程中
MVSP-183 - 标准化用户项目中的 Sencha 占用空间
MVSP-188 - 允许用户启用或禁用字符串文字中的自动 IntelliSense
IDE 插件 | 使用条款