文档帮助

术语、图标和标签

许多类在使用配置对象创建(实例化)类时都有快捷名称。快捷名称被称为 alias(别名)(如果类扩展了 Ext.Component,则为 xtype)。别名/xtype 列在适用类的类名旁边,以供快速参考。

访问级别

框架类或其成员可以指定为 private(私有)或 protected(受保护)。否则,该类/成员为 public(公共)。Publicprotectedprivate 是访问描述符,用于传达类或类成员应如何以及何时使用。

成员类型

成员语法

下面是一个类成员示例,我们可以对其进行剖析,以展示类成员的语法(在本例中是从 Ext.button.Button 类查看的 lookupComponent 方法)。

lookupComponent ( item ) : Ext.Component
受保护的

当原始配置对象添加到此容器时调用,无论是在初始化 items 配置期间,还是在 添加新项目 或 {@link #insert 插入} 时。

此方法将传递的对象转换为实例化的子组件。

当需要对子组件创建应用特殊处理时,可以在子类中重写此方法。

参数

item :  Object

正在添加的配置对象。

返回
Ext.Component

要添加的组件。

让我们看看成员行的每个部分

成员标志

API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。

类图标

- 表示框架类

- 单例框架类。*有关更多信息,请参阅单例标志

- 组件类型框架类(Ext JS 框架中扩展 Ext.Component 的任何类)

- 表示类、成员或指南在当前查看的版本中是新的

成员图标

- 表示 config 类型的类成员

- 表示 property 类型的类成员

- 表示 method 类型的类成员

- 表示 event 类型的类成员

- 表示 theme variable 类型的类成员

- 表示 theme mixin 类型的类成员

- 表示类、成员或指南在当前查看的版本中是新的

类成员快速导航菜单

在 API 文档页面的类名正下方是一行按钮,对应于当前类拥有的成员类型。每个按钮显示按类型划分的成员计数(此计数在应用过滤器后会更新)。单击该按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示一个弹出菜单,其中包含该类型的所有成员,以便快速导航。

Getter 和 Setter 方法

与类配置选项相关的 getter 和 setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中,就在它们所作用的配置下方。getter 和 setter 方法文档将在配置行中找到,以便于参考。

历史记录栏

您的页面历史记录保存在本地存储中,并在顶部标题栏正下方显示(使用可用空间)。默认情况下,显示的唯一搜索结果是与您当前查看的产品/版本匹配的页面。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来展开显示的内容。这将显示历史记录栏中所有产品/版本的所有最近页面。

在历史记录配置菜单中,您还将看到最近访问页面的列表。结果按“当前产品/版本”和“全部”单选按钮过滤。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。

如果在历史记录配置菜单中选择“全部”,“在历史记录栏中显示产品详细信息”的复选框选项将启用。选中后,每个历史页面的产品/版本将与页面名称一起显示在历史记录栏中。将光标悬停在历史记录栏中的页面名称上也会显示产品/版本作为工具提示。

搜索和过滤器

可以使用页面顶部的搜索字段搜索 API 文档和指南。

在 API 文档页面上,还有一个过滤器输入字段,该字段使用过滤器字符串过滤成员行。除了按字符串过滤外,您还可以按访问级别、继承和只读过滤类成员。这是通过使用页面顶部的复选框完成的。

API 类导航树底部的复选框过滤类列表,以包含或排除私有类。

单击空的搜索字段将显示您最近 10 次搜索,以便快速导航。

API 文档类元数据

每个 API 文档页面(JavaScript 原始类型页面除外)都有一个菜单视图,其中包含与该类相关的元数据。此元数据视图将具有以下一个或多个:

展开和折叠示例与类成员

可运行的示例 (Fiddles) 默认情况下在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您也可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。

类成员默认情况下在页面上折叠。您可以使用成员行左侧的箭头图标或右上角的展开/折叠所有切换按钮全局展开和折叠成员。

桌面 -vs- 移动视图

在较窄的屏幕或浏览器上查看文档将导致针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别在于:

查看类源代码

可以通过单击 API 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。

Rapid Ext JS 1.0.0


顶部

Rapid Ext JS 扩展功能

内容

  • 打开现有项目
  • 创建新的 Ext JS 应用程序
  • Sencha 工具箱
  • 缩放
  • 屏幕分辨率选择器
  • 组件层次结构
  • 包资源管理器
  • 操作命令
  • 视图模式
  • 新建视图生成器
  • Sencha 工具箱重新定位
  • 与 VS Code 兼容的颜色主题
  • UX 组件
  • 组件配置
  • 修改后的配置过滤器
  • 撤消/重做功能
  • 复制-粘贴功能
  • 最近/频繁使用的组件
  • 直接在模拟器上运行应用程序的功能
  • 添加了更多示例模板

打开现有项目

此功能用于将基于 CMD 和 Ext-gen 的应用程序迁移到 Rapid Ext JS 中。

  1. 单击“打开现有项目”,导入您希望使用的应用程序到 Rapid Ext JS 中。
  2. 您将收到确认消息。如果您单击“是”,您可以修改新的应用程序名称和路径。修改名称和路径后,单击“是”进行迁移。如果您单击“否”,Rapid Ext JS 扩展将被禁用,应用程序将正常使用 VS Code 编辑器打开。

open

创建新的 Ext JS 应用程序

如果您是 Sencha 许可客户,请使用您的 Sencha 凭据登录以访问高级组件。非许可用户也可以使用 Rapid Ext JS 生成应用程序,但作为试用用户,组件访问权限有限。

通过填写应用程序名称、生成应用程序的路径、主题、模板、工具包、Ext-gen 版本和包来创建应用程序。将根据用户选择生成示例应用程序。注意:应用程序生成时间将因用户选择的包而异。

create

Sencha 工具箱

Sencha 工具箱提供组件、插件和配置的列表。用户可以通过名称、xtype、别名或备用类名查找组件。用户可以将任何组件拖放到画布中,并且相应代码将在文件中更新。可以通过配置自定义拖放的组件。

toolbox

缩放

画布可以通过在 25% 到 500% 之间缩放来调整。快速重置按钮可用于重置为画布的原始大小。

zooming

屏幕分辨率选择器

屏幕分辨率选择器提供 15 种不同的设备分辨率以及更改宽度和高度的选项。这有助于可视化画布上不同分辨率的组件。

screen resolution

组件层次结构

组件层次结构以树状视图保存画布中组件的结构。当单击任何组件时,层次结构会将组件聚焦在画布上并突出显示该组件的代码。如果任何组件包含函数,它们将被添加到组件层次结构中。

component hierarchy

包资源管理器

包资源管理器具有标准和高级包,用户可以下载和安装。它还允许用户手动添加包,如果他们有本地下载的包或由 Rapid Ext JS 扩展处理的一键安装。

package explorer

操作命令

操作命令提供四个选项

Restart watch(重启监听)– Sencha app watch 命令将停止并重启。

Stop watch(停止监听)– 它将停止所有正在运行的端口。

Run build(运行构建)– Sencha app build 命令将触发。

Build Dynamic Packages(构建动态包)– 它将动态加载包。这有助于在使用 Rapid Ext JS 扩展上的包资源管理器选项生成应用程序后添加包。

action commands

视图模式

有三个切换按钮可在代码、设计和拆分视图之间切换

Code(代码)- 仅显示“代码”编辑器或将用户切换到该文件已打开的“代码”编辑器。它还允许用户从“代码”视图切换到“设计”视图。

Design(设计)- 仅显示“设计”画布并关闭任何其他打开的视图。用户可以从 Sencha 工具箱拖动任何组件并将其拖放到设计画布中。右键单击选定的组件时,还可以选择复制、粘贴、复制和删除组件。

Split View(拆分视图)- 并排显示“设计”和“代码”视图。这允许用户更改设计以及代码编辑器。直观地同时显示更改和代码更新。

view modes

新建视图生成器

Rapid Ext JS 提供了一个选项,可以根据用户选择生成自定义视图文件夹。用户可以选择他希望生成的新视图。用户还可以选择他需要添加到视图文件夹中的文件。以下是 Rapid Ext JS 中可用的视图类型:

Panel(面板)– 面板视图类型与 Model、Controller 和 SCSS 文件一起创建。

Container(容器)– 容器视图类型与 Model、Controller 和 SCSS 文件一起创建。

Tab panel(标签面板)- 标签面板视图类型与 Model、Controller 和 SCSS 文件一起创建。

Grid(网格)– 网格视图类型与 Model、Controller 和 SCSS 文件一起创建。

Window(窗口)– 窗口视图类型与 Model、Controller 和 SCSS 文件一起创建。它仅在 Classic 和 Universal Toolkit 中可用。

view generator

Sencha 工具箱重新定位

Rapid Ext JS 具有一个很酷的功能,可以将 Sencha 工具箱重新定位到左侧、右侧和底部。默认情况下,Sencha 工具箱位置将位于右侧。用户可以通过 VS Code 设置重新定位它。

toolbox reposition

与 VS Code 兼容的颜色主题

VS Code 可以更改编辑器背景的颜色主题。Rapid Ext JS 已为 VS Code 中的每个主题颜色提供支持。默认的 VS Code 颜色为“Dark”(深色)。用户可以通过导航到 View(视图) > Command Palette(命令面板) > 搜索“color themes”(颜色主题)来更改主题。

themes with vs code

create project

create new project

UX 组件

Rapid Ext JS 扩展根据用户许可层级支持 Classic 中超过 120 个组件和 Modern 中超过 135 个组件。所有这些组件都可以拖动到画布中。拖放组件后,代码将在代码文件中自动更新。用户可以在画布中体验该组件的设计。他们还可以按名称、类名、xtype、备用类名和别名过滤组件。

组件配置

选择任何组件时,配置列表将刷新。用户可以使用与组件关联的任何配置,并按键或值搜索配置。如果用户向配置添加任何错误的值,则该代码将被删除,并由默认值(如果可用)更新。在底部,用户可以添加或删除与组件关联的事件侦听器。用户还可以添加或删除自定义函数和参数。

component configurations

修改后的配置过滤器

配置搜索栏下方添加了一个复选框,用于过滤修改后的配置。如果用户选中或取消选中该复选框,则可以过滤相应组件的所有修改后的配置以进行快速访问。

modified configs filter

跨设计视图的组件的撤消-重做功能。

引入了跨设计视图的组件的撤消-重做功能。用户可以轻松地撤消/重做设计更改,并且更改会在代码视图中更新。

Clone setup

复制-粘贴功能

引入了跨视图的组件的复制-粘贴功能。用户可以通过允许从视图 1 复制组件并将它们粘贴到设计视图上的视图 2 中,在跨视图的组件之间进行交互。

Clone setup

依赖项列表

列出用户机器上缺少的文件,并提供有关所需依赖项的信息。开发了缺少依赖项视图,以突出显示在使用 Rapid Ext JS 功能之前的先决条件(Java、Node/NPM)。

直接在模拟器上运行应用程序的功能

直接在模拟器上运行应用程序的功能是一项关键功能,它提供了一个模拟环境,可以镜像目标设备。Rapid Ext JS 应用程序配备了一个文档模拟器,为用户提供了实时预览和交互式编辑环境,以简化文档创建过程。

模拟器通过提供一种快速且经济高效的方式来评估应用程序在各种设备和屏幕尺寸上的性能,从而实现更高效的开发工作流程。此功能增强了整体开发体验,促进了快速迭代并确保应用程序的更顺畅部署过程。

Clone setup

添加了更多示例模板

在 Rapid Ext JS 中,从 Sencha 示例中添加默认模板大大增强了应用程序开发过程。这些模板充当有价值的起点,允许用户快速有效地生成新应用程序。利用 Sencha 示例作为模板为开发人员提供了标准化且经过验证的基础,确保了其项目中的最佳实践和一致性。

以下示例在 Rapid Ext JS 中用作模板,用户可以从中生成起始应用程序

  • 管理仪表板(universalclassicmodernadmindashboard)
  • 执行仪表板(classicexecutivedashboard)
  • 工单应用程序(classicticketapp)
  • Ext JS 日历(classiccalendar)
  • 门户演示(classicportal)
  • 简单任务(classicsimpletask)
  • 辅助功能演示(classicsimpletask)
  • 患者医院分配(classicpatienthospital)
  • 员工目录(moderncoworkee)

通过将这些示例集成到 Rapid Ext JS 框架中,用户可以加快创建强大应用程序的速度,同时受益于 Sencha 示例代码片段中封装的专业知识。这种集成促进了 Ext JS 应用程序的无缝且高效的开发体验。

在 Sencha 工具箱中使用 Bind 配置

  • 对于简单的绑定,单击组件并在搜索字段中搜索“bind”。在建议中,用户将获得 ViewModel 中存储的两个值。如果组件的默认绑定属性是“text”,则用户可以直接使用它。

simple bind

  • 如果您想绑定不是默认绑定属性的配置,则必须在使用配置列表中的绑定时传递配置,如下面的 GIF 所示。

style bind

  • 您还可以绑定多个配置,如下面的 GIF 所示。

multi bind

  • 您还可以执行诸如连接之类的操作,如下面的 GIF 所示。

add bind

从 Sencha 工具箱中排除的用于拖放的组件列表:

路径 xtype
Ext.grid.Tree tree
Ext.Editor editor
Ext.LoadMask loadmask
Ext.Mask mask
Ext.MessageBox messagebox
Ext.field.trigger.Time timetrigger
Ext.Dialog window
Ext.d3.hierarchy.tree.HorizontalTree d3-horizontal
Ext.slider.Thumb thumb
Ext.tip.ToolTip tooltip
Ext.menu.ColorPicker colormenu
Ext.exporter.Base exporter.base
Ext.pivot.plugin.configurator.Container pivotconfigcontainer
Ext.pivot.plugin.configurator.Panel pivotconfigpanel

Rapid Ext JS 1.0.0