文档帮助

目录

术语、图标和标签 访问级别 成员类型 成员语法 成员标志 类图标 成员图标 导航和功能 类成员快速导航菜单 Getter 和 Setter 方法 历史记录栏 搜索和过滤器 API 文档类元数据 展开和折叠示例和类成员 桌面 -vs- 移动视图 查看类源代码

术语、图标和标签

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

访问级别

框架类或其成员可以指定为 private（私有）或 protected（受保护）。否则，类/成员为 public（公共）。Public、protected 和 private 是访问描述符，用于传达应如何以及何时使用类或类成员。

成员类型

成员语法

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

Ext.container.Container
查看源代码
lookupComponent ( item ) : Ext.Component
受保护的

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

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

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

参数

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 原始类型页面除外）都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项

展开和折叠示例和类成员

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

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

桌面 -vs- 移动视图

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

查看类源代码

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

GXT 4.x


顶部

目录

设置视口 整合 Touch 功能 使用支持 Touch 的小部件 使用 GestureRecognizer 监听手势事件 使用 gxt.device 属性

Touch 开发入门

GXT 4 为平板设备引入了 Touch 支持。本指南介绍了 GXT 4 中 Touch 功能的入门知识。

设置视口

在平板电脑上运行 GXT 应用程序时，某些 Touch 交互可能会与系统手势冲突。例如，如果您的应用程序使用响应双击手势的小部件，则它可能会与系统双击缩放功能冲突。一种解决方案是“锁定”视口，以便用户无法使用系统缩放功能。为此，请将视口 meta 标签添加到应用程序的主机页面 (index.html)，如下所示

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

此视口 meta 标签将完全阻止缩放。但是，许多最初为桌面设计的应用程序在较小的平板电脑屏幕上会显得拥挤。理想情况下，您应该创建一个平板电脑 UI，其 Touch 目标专为平板设备设计，并禁用系统手势以防止手势冲突。但是，一种可能的折衷方案是限制缩放，但不要完全禁用它。为此，您可以使用如下所示的 meta 标签，该标签允许捏合缩放到 3 倍

    <meta name="viewport" content="width=device-width, initial-scale=1, 
    maximum-scale=3, user-scalable=yes">

整合 Touch 功能

在您的应用程序中包含 Touch 功能主要有三种方法。这些将在以下部分中进行解释。

使用支持 Touch 的小部件

在 GXT 4 中，交互式小部件已得到增强，可以响应 Touch。在大多数情况下，您不必更新代码即可利用新的 Touch 功能。例如，像 com.sencha.gxt.widget.core.client.button.TextButton 这样的按钮已经处理了 com.sencha.gxt.widget.core.client.event.SelectEvent，它响应鼠标单击或 Touch 而触发。类似地，com.sencha.gxt.widget.core.client.tree.Tree 将自动响应 Touch 事件以折叠和展开节点。现在处理 Touch 事件的许多小部件只是委托给相应的单击处理程序 (onMouseClick、onMouseDown 等)，因此如果您已经在这些方法中实现了功能，则可能根本不必更改代码。但是，在某些情况下，您可能希望专门响应 Touch 事件。在下一节中，我们将介绍如何使用 GestureRecognizer 来执行此操作。

使用 GestureRecognizer

GXT Touch 支持是使用 com.sencha.gxt.core.client.gestures.GestureRecognizer 实现的，它将 Touch 事件转换为逻辑手势，例如 tap（点击）、double-tap（双击）和 long press（长按）。在 GXT 4 中，许多小部件和单元格已经添加了 GestureRecognizer 来处理典型的 Touch 事件。此外，您可以轻松地将 GestureRecognizer 添加到任何 Widget 或 Cell。

例如，假设您有一个自定义 Cell，您希望以特定方式处理 tap（点击）。为此，请扩展 com.sencha.gxt.cell.core.client.AbstractEventCell 并将以下内容放入构造函数中

addCellGestureAdapter(new TapGestureRecognizer.CellTapGestureRecognizer<C>() {
    @Override
    protected void onTap(TouchData tap, Context context, Element parent, C value, ValueUpdater<C> valueUpdater) {
        doSomething(...);
    }
};

有关可用手势识别器列表以及更多解释和示例，请参阅 手势指南。

监听手势事件

每个 com.sencha.gxt.core.client.gestures.GestureRecognizer 定义逻辑事件，例如 $TapGestureEvent 和 $LongPressEvent 。默认情况下，GestureRecognizer 将其事件触发到注册它的 Component、Cell 或 Widget (您可以通过在调用 addGestureRecognizer() 后调用 com.sencha.gxt.core.client.gestures.GestureRecognizer 的 setDelegate 方法来提供不同的处理程序)。因此，处理手势相关事件的另一种方法是使用 com.google.gwt.user.client.ui.Widget.addHandler() 为它们添加处理程序。

例如，com.sencha.gxt.widget.core.client.TabPanel 注册了一个 TapGestureRecognizer。如果您想收到面板上任何 TapGestureEvent 的通知，您可以像这样为其添加处理程序

tabPanel.addHandler(new TapGestureRecognizer.TapGestureEvent.TapGestureHandler {
    @Override
    void onTapGesture(TapGestureEvent event) {
        // do something
    }
}, TapGestureRecognizer.TapGestureEvent.getType());

使用 gxt.device 属性

GXT 4 引入了一个新属性 gxt.device，它为桌面设备与平板设备创建特定的排列。目前，检测逻辑非常简单。如果用户代理是公认的移动操作系统（Android、iPad/iPod/iPhone、BlackBerry、IEMobile），则 gxt.device 属性的值将为 tablet（平板电脑）。否则，它的值将为 desktop（桌面）。GXT 尚不支持手机，因为 GXT 小部件并非为通常较小的屏幕而设计。但是，phone（手机）是 gxt.device 属性的有效值，用于未来的兼容性。

默认情况下，新的 gxt.device 属性将在您编译应用程序时导致构建更多 GWT 排列。为避免这种情况，建议将以下指令放入您的 '*.gwt.xml' 文件中

    <collapse-property name="gxt.device" values="*" />

在 排列指南 中了解有关折叠属性的更多信息。

此外，您可以通过 com.sencha.gxt.core.client.GXT 类上的方法在运行时访问 gxt.device 属性。这些是

  • boolean GXT.isDesktop()
  • boolean GXT.isTablet()

GXT 4.x