文档帮助

目录

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

术语、图标和标签

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

访问级别

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

成员类型

成员语法

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

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

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

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

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

参数

item :  Object

正在添加的配置对象。

返回值
Ext.Component

要添加的组件。

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

成员标志

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

类图标

- 表示框架类

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

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

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

成员图标

- 表示 config 类型的类成员

- 表示 property 类型的类成员

- 表示 method 类型的类成员

- 表示 event 类型的类成员

- 表示 theme variable 类型的类成员

- 表示 theme mixin 类型的类成员

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

类成员快速导航菜单

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

Getter 和 Setter 方法

与类 config 选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的 config 部分中，就在它们工作的 config 下方。Getter 和 Setter 方法文档将在 config 行中找到，以便于参考。

历史记录栏

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

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

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

搜索和过滤器

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

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

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

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

API 文档类元数据

每个 API 文档页面（JavaScript 原始类型页面除外）都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一个或多个

展开和折叠示例及类成员

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

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

桌面 -vs- 移动视图

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

查看类源代码

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

Sencha Touch 2.4


顶部

目录

创建起始环境 我们要创建什么 入门 添加博客页面 深入了解 创建联系表单 整合在一起 后续步骤

创建您的首个应用

本指南帮助您为移动设备创建首个应用。

在开始之前，请确保您已安装 Sencha Touch 所需的所有相应软件。这些要求在 入门指南 中列出。

创建起始环境

选择或创建一个目录来存放您的应用程序，更改到该目录，并发出以下命令

 $ sencha -sdk /path/to/touch generate app MyApp .

其中

  1. /path/to/touch 是您解压缩 Touch 软件的目录。
  2. MyApp 是您为应用程序指定的名称。

这将生成一个以 MyApp 变量命名的起始 Sencha Touch 应用程序，并位于当前目录中。

起始应用程序包含创建 Sencha Touch 应用程序所需的所有文件，包括默认的 index.html 文件、Touch SDK 的副本、CSS 文件以及用于为您的应用程序创建原生软件包的图像和配置文件。

您可以通过在 Web 浏览器中打开应用程序来验证应用程序是否已成功生成。如果您将 SDK 提取到您的 Web 根文件夹，请导航到 https://127.0.0.1/MyApp。如果您正在使用 Sencha Cmd Web 服务器，则可以使用 https://127.0.0.1:1841/ URL 访问已服务的应用程序。

我们要创建什么

我们正在创建一个简单的移动 Web 应用程序，用于公司的移动站点。该应用程序包括主页、联系表单和一个简单的列表，该列表获取 Sencha 最近的博客文章，并允许访问者在移动设备上阅读它们。

解压缩 Sencha Touch 后，您可以将 app.js 文件中的代码替换为以下示例。

注意：app.js 文件中的起始内容包含您可以忽略的额外代码，用于此示例。

以下是一个交互式示例应用程序，您可以更改代码并预览结果

入门

由于应用程序使用 选项卡面板 来容纳四个页面，因此我们首先创建 UI。Sencha Touch 的入口点是 Ext.application 的 launch 函数。可以将此视为应用程序的 main 部分，以及包含应用程序逻辑的位置。

如果您在浏览器中运行此代码（通过单击“预览”按钮），则 Ext.tab.Panel 将出现在屏幕顶部。由于主页可能会更受欢迎，因此向其中添加一些内容并将选项卡栏重新定位到页面底部。默认情况下，选项卡栏位于页面顶部，但设置 tabBarPosition 配置会将其移动到页面底部。然后，我们将 HTML 添加到 items 数组中以创建内容。使用 items 数组将子项添加到容器中，如下面的代码所示

您可以单击示例旁边的“预览”按钮来检查结果：您应该看到一些 HTML 内容，但看起来不太好。我们向面板添加 cls 配置，添加一个 CSS 类，我们可以将其作为目标，使外观更好。我们添加的 CSS 位于 SDK 下载的 examples/getting_started/resources/css/app.css 文件中。这是主页此时的外观

添加博客页面

现在我们有了一个外观不错的主页，我们转到下一个屏幕。为了使每个页面的代码易于理解，我们一次创建一个选项卡，然后将它们全部组合在一起。

现在，我们删除第一个选项卡并将其替换为列表。我们使用 Google 的 Feed API 服务 来获取 Feed。由于涉及更多代码，因此我们首先看一下结果，然后解释我们是如何完成的

您可以单击示例代码上方的“代码编辑器”按钮以查看完整代码，但我们将逐段介绍。此时，我们使用 nestedlist 而不是面板，并使用从 sencha.com/blog 获取的最新博客文章填充列表。我们使用嵌套列表组件，以便我们可以通过点击列表来深入查看博客条目。

让我们分解一下之前的代码，从列表本身开始

在之前的代码中，我们为嵌套列表提供了一些单行配置 - title、iconCls 和 displayField - 以及一个更详细的配置，称为 store。Store 配置告诉嵌套列表如何获取其数据。让我们检查每个 Store 配置

  • type: tree - 创建 tree store，NestedList 使用它。
  • fields - 告诉 Store 我们在博客数据中期望的字段（标题、内容、作者等）。
  • proxy - 告诉 Store 从哪里获取其数据。
  • root - 告诉根节点它不是叶节点。由于在代码的早期，我们将 leaf defaultValue 设置为 true，因此我们需要为根节点覆盖它。

在所有 Store 配置中，proxy 正在执行最重要的工作。我们告诉代理使用 Google 的 Feed API 服务 以 JSON-P 格式返回我们的博客数据。这使我们能够从博客中抓取 Feed 数据并在我们的应用程序中查看它（例如，尝试将 Sencha 博客 URL 交换为 http://rss.slashdot.org/Slashdot/slashdot 在之前的示例中获取 Slashdot 的 Feed）。

proxy 定义的最后一部分是 Reader。Reader 是将来自 Google 的响应解码为有用数据的实体。当 Google 发回博客数据时，它们将其嵌套在 JSON 对象中，该对象看起来有点像以下示例

{
    responseData: {
        feed: {
            entries: [
                {author: 'Bob', title: 'Great Post', content: 'Really good content...'}
            ]
        }
    }
}

在此代码中，重要的部分是 entries 数组，因此我们将 Reader 的 rootProperty 设置为 'responseData.feed.entries'，并让框架完成其余工作。

深入了解

现在我们的嵌套列表正在获取和显示数据，我们需要允许用户点击条目来阅读它。为了添加此功能，我们向我们的嵌套列表添加了两个更多配置，如下所示

{
    xtype: 'nestedlist',
    //all other configurations as above

    detailCard: {
        xtype: 'panel',
        scrollable: true,
        styleHtmlContent: true
    },

    listeners: {
        itemtap: function(nestedList, list, index, element, post) {
            this.getDetailCard().setHtml(post.get('content'));
        }
    }
}

在此代码示例中，我们创建了一个 detailCard，这是嵌套列表的一个有用功能，允许您在用户点击项目时显示不同的视图。我们将 detailCard 配置为可滚动的 Panel，它使用 styleHtmlContent 使文本看起来更好。

最后一步是添加 itemtap 侦听器，每当项目被点击时，它都会调用我们的函数。该函数将 detailCard 的 HTML 设置为您点击的文章的内容。框架将 detailCard 动画到视图中，使文章显示出来。这是我们为使博客阅读器工作而必须编写的唯一一行代码。

创建联系表单

我们为应用程序做的最后一件事是创建联系表单。我们获取用户的姓名、电子邮件地址和消息，并使用 FieldSet 使其外观良好。 此功能的代码如下

这次我们创建一个 form，其中包含一个 fieldset。fieldset 包含三个字段 - 一个用于姓名，一个用于电子邮件地址，一个用于消息。我们使用 [[touch: Ext.layout.VBox VBox layout]] 在页面上垂直排列项目，一个在另一个之上。

在面板的底部，我们添加了一个带有 tap handler 的 Button。handler 使用 up 方法，该方法返回包含按钮的表单面板。然后我们调用 submit 来提交表单，这会将其发送到指定的 URL ('contact.php')。

整合在一起

在单独创建每个视图后，让我们将它们全部整合到一个完整的应用程序中

下一步

您可以在以下位置找到入门应用程序的完整源代码：Sencha Fiddle。

创建应用程序后，您可以使用以下命令构建它

 sencha app build

Sencha Touch 2.4