文档帮助

目录

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

术语、图标和标签

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

访问级别

框架类或其成员可以指定为 private 或 protected。否则，该类/成员为 public。Public、protected 和 private 是访问描述符，用于传达类或类成员应如何以及何时使用。

成员类型

成员语法

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

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

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

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

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

参数

item :  Object

正在添加的配置对象。

返回值
Ext.Component

要添加的组件。

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

成员标志

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

类图标

- 表示框架类

- Singleton 框架类。 *有关更多信息，请参阅 singleton 标志

- 组件类型框架类（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 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。

Sencha Touch 2.4


顶部

目录

创建表单 加载数据 检索表单数据 提交表单

在 Sencha Touch 中使用表单

大多数需要用户输入的应用程序都使用表单。在 Sencha Touch 中，表单是普通 HTML5 表单的包装器，具有用于验证和提交数据的附加选项，并提供了一种以吸引人的视觉风格布局字段的简便方法。

创建表单

表单面板呈现一组表单字段，并提供加载和保存数据的便捷方法。通常，表单面板包含您要显示的一组字段，这些字段在 items 配置中排序，如下例所示

在此示例中，我们创建了一个简单的表单面板，该面板可用作注册表单以注册服务。我们为用户的姓名添加了一个普通的 文本、一个 电子邮件，最后是一个 密码。在每种情况下，我们都在字段上提供了 name 配置，以便在我们在表单上加载和保存数据时识别它。

加载数据

使用上面创建的表单，我们可以以不同的方式将数据加载到其中，最简单的方法是 setValues 方法

form.setValues({
    name: 'Seth',
    email: '[email protected]',
    password: 'secret'
});

您还可以将 model 实例加载到表单中 - 例如，假设您有一个 User 模型，并且想要将特定实例加载到表单中

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['name', 'email', 'password']
    }
});

var ed = Ext.create('MyApp.model.User', {
    name: 'Seth',
    email: '[email protected]',
    password: 'secret'
});

form.setRecord(ed);

检索表单数据

从表单面板检索数据通常使用 getValues 方法完成

var values = form.getValues();

// values now looks like this:
{
    name: 'Seth',
    email: '[email protected]',
    password: 'secret'
}

也可以监听各个字段上的 change 事件，以便更及时地获得用户正在进行的更改的通知。在以下示例中，我们扩展了先前包含 User 模型的代码，并在任何字段更改后立即更新模型

var form = Ext.create('Ext.form.Panel', {
    listeners: {
        '> field': {
            change: function(field, newValue, oldValue) {
                ed.set(field.getName(), newValue);
            }
        }
    },
    items: [
        // as before
    ]
});

此示例使用了 Sencha Touch 的一项新功能，该功能使您可以在任何容器的子组件上指定侦听器。在本例中，我们将侦听器附加到作为表单面板直接子级的每个表单字段的 change 事件。侦听器获取触发 change 事件的字段的名称，并使用新值更新 model 实例。例如，更改表单中的电子邮件字段将更新模型的电子邮件字段。

提交表单

Sencha Touch 提供了多种提交表单数据的方法。在前面的示例中，我们有一个已更新的 Model 实例，这使我们能够使用 Model 的 save 方法将更改持久保存到我们的服务器，而无需使用传统的表单提交。或者，我们可以使用 submit 方法发送正常的浏览器表单提交

form.submit({
    url: 'url/to/submit/to',
    method: 'POST',
    success: function() {
        alert('form submitted successfully!');
    }
});

在这种情况下，我们在 submit 函数调用中提供了提交表单的 url - 或者，您可以在创建表单时设置 url 配置。您可以指定其他参数（有关完整列表，请参阅 submit），包括成功和失败的回调函数，这些函数根据表单提交是否成功调用。这些函数通常用于在数据保存到服务器后在您的应用程序中执行某些操作。

Sencha Touch 2.4