文档帮助

术语、图标和标签

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

访问级别

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

成员类型

成员语法

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

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

当原始配置对象添加到此容器时调用,无论是在 items 配置的初始化期间,还是在添加新项目 added 或 {@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) 默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。

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

桌面与移动视图

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

查看类源代码

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

Ext JS 7.8.0 - Classic Toolkit


顶部
指南适用于: classic

ExtJS 中的平板电脑和触摸屏支持

ExtJS 提供对具有触摸屏输入的设备(包括平板电脑和触摸屏笔记本电脑)的支持。此功能的主要目标是允许 ExtJS 应用程序在触摸屏设备上运行,而几乎无需修改。这意味着开发人员可以花更少的时间考虑兼容性问题,而将更多的时间用于实现出色的应用程序。

触摸屏支持的实现方式

对具有触摸屏的设备的支持可以分为三类。

事件规范化

事件规范化是允许 Ext JS 应用程序在触摸屏设备上运行的关键。此规范化在后台发生,并且是从标准鼠标事件到其等效的触摸和指针事件的简单转换。

指针事件是 w3c 标准,用于处理针对屏幕上特定坐标集(无论输入设备如何 - 鼠标、触摸、触控笔等)的事件

当您的代码请求鼠标事件的侦听器时,框架会根据需要附加类似的触摸或指针事件。例如,如果应用程序尝试附加 mousedown 侦听器

myElement.on('mousedown', someFunction);

对于支持触摸事件的设备,事件系统会将其转换为 touchstart

myElement.on('touchstart', someFunction);

或者,对于支持指针事件的设备,则转换为 pointerdown

myElement.on('pointerdown', someFunction);

此转换是为了让您无需任何额外的编码即可实现平板电脑和触摸屏支持。

在大多数情况下,框架可以在鼠标、触摸和指针输入之间无缝转换。但是,有一些鼠标交互(例如 mouseover)不容易转换为触摸交互。此类事件需要单独处理,并在后续章节中讨论。

手势系统

除了标准 DOM 事件外,元素还会触发合成的“手势”事件。由于 Sencha Touch 事件系统构成了 Ext JS 5 中新事件系统的基础,因此 Sencha Touch 用户可能已经熟悉此概念。

从浏览器的角度来看,主要有 3 种类型的指针、触摸和鼠标事件 - 开始、移动和结束

事件 触摸 指针 鼠标
开始 touchstart pointerdown mousedown
移动 touchmove pointermove mousemove
停止 touchend pointerup

在解释这些事件的序列和时序后,框架可以合成更复杂的事件,例如 drag(拖动)、swipe(滑动)、longpress(长按)、pinch(捏合)、rotate(旋转)和 tap(点击)。Ext JS 应用程序可以像侦听任何其他事件一样侦听手势事件,例如

Ext.get('myElement').on('longpress', handlerFunction);

最初的 Sencha Touch 手势系统主要是在考虑触摸事件的情况下设计的。通过向手势系统添加对指针和鼠标事件的完全支持,Ext JS 允许任何手势响应任何类型的输入。这意味着不仅可以使用触摸输入触发所有手势,而且可以使用鼠标触发所有单点手势(点击、滑动等)。这导致手势系统可以在设备之间无缝工作,而与输入类型无关。

触摸滚动器

在某些移动 webkit 浏览器中,对内容溢出的元素进行本地滚动的效果不尽如人意。缺乏动量滚动和滚动位置指示器可能会使滚动变得乏味且不直观。“触摸滚动器”借鉴了 Sencha Touch,通过使用 JavaScript 实现带有滚动指示器的动量滚动来解决此问题。应用程序开发人员通常不需要执行任何操作来打开触摸滚动器。在本地滚动效果不佳的浏览器中,默认情况下会启用它。

触摸屏支持对应用程序的意义

在 Ext JS 5 应用程序中,规范化的事件和手势识别默认处于活动状态。这意味着,在大多数情况下,无需采取任何特殊操作即可启用平板电脑和触摸屏支持。但是,有两个特定领域可能需要特别注意。

第一个领域涉及在触摸世界中没有明显类似物的鼠标事件。到目前为止,Ext JS 5 不尝试对以下鼠标事件执行任何规范化

  • mouseover
  • mouseout
  • mouseenter
  • mouseleave

在桌面设备上响应这些事件的应用程序功能可能必须为触摸设备单独重新实现。开发人员在构建应用程序时应牢记这一点。为了确保重要的应用程序功能可供触摸屏访问,可能有必要为这些交互提供备用实现。这通常意味着用适当的触摸手势替换鼠标事件。Ext JS 在内部的多个位置采用了这种方法。

一个示例是网格组件。在桌面设备上,网格列标题菜单在响应对标题触发器元素的单击时显示。但是,触发器仅在响应列标题的 mouseover 时才变得可见。由于在触摸屏上不存在与“mouseover”等效的手势,因此触发器永远不会变得可见,因此无法触摸。为了确保可以访问列标题菜单,Ext JS 在检测到网格正在触摸屏设备上使用时,会响应“longpress”(长按)来显示菜单。

注意: 应用程序和自定义组件的开发人员可能需要根据需要进行类似的调整。

可能需要注意的第二个领域与一些内部框架更改有关。为了支持触摸手势,Ext JS 5+ 切换到委托事件模型。不是将侦听器直接附加到 DOM 元素,而是将每个事件类型的单个侦听器附加到 DOM 的顶部(窗口或文档对象)。然后,Ext JS 事件系统根据冒泡到窗口对象的事件的目标元素分派事件处理程序。仅使用 Ext JS API 侦听事件的应用程序开发人员在使用这种新方法时不会遇到任何问题。

但是,如果使用 DOM API 直接附加侦听器(addEventListener 或 attachEvent),或者如果使用第三方 JavaScript 库,则直接附加的事件处理程序的时序相对于其委托的对应项的时序可能会出现问题。

注意: 平板电脑和触摸屏支持适用于 Safari、Chrome 和 IE10+。不支持 Android 浏览器。

Ext JS 7.8.0 - Classic Toolkit