文档帮助

术语、图标和标签

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

访问级别

框架类或其成员可以指定为privateprotected。否则,该类/成员为publicPublicprotectedprivate是访问描述符,用于传达如何以及何时使用该类或类成员。

成员类型

成员语法

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

lookupComponent ( item ) : Ext.Component
protected

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

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

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

参数

item :  Object

要添加的配置对象。

返回值
Ext.Component

要添加的组件。

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

成员标志

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

类图标

- 表示框架类

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

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

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

成员图标

- 表示类型为config的类成员

- 表示类型为property的类成员

- 表示类型为method的类成员

- 表示类型为event的类成员

- 表示类型为主题变量的类成员

- 表示类型为主题混合的类成员

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

类成员快速导航菜单

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

Getter 和 Setter 方法

与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中,紧挨着它们所关联的配置。Getter 和 Setter 方法文档将在配置行中找到,以便于参考。

历史记录栏

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

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

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

搜索和过滤器

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

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

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

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

API 文档类元数据

每个 API 文档页面(除了 Javascript 原语页面)都有一个与该类相关的元数据的菜单视图。此元数据视图将包含以下一项或多项

展开和折叠示例和类成员

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

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

桌面与移动视图

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

查看类源代码

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

Sencha Touch 2.4


顶部

Sencha Touch 入门

什么是 Sencha Touch?

Sencha Touch 是一个高性能 HTML5 移动应用程序框架。您可以使用 Sencha Touch 在浏览器或混合外壳中创建类似原生应用程序的体验。Sencha Touch 支持 Android、iOS、Windows Phone、Microsoft Surface Pro 和 RT 以及 BlackBerry 设备。

所需软件

  1. 下载并解压缩 Sencha Touch。您可以将软件解压缩到任何目录。

  2. Sencha Touch 需要

    • Chrome
    • Safari
    • 在移动设备上,您可以使用 Chrome、Safari 或 Internet Explorer 10 或 11。
  3. Java 运行时环境 版本 1.7。Sencha Cmd 是用 Java 编写的,需要 JRE 才能运行。注意:如果您使用 Windows 构建 Android 应用程序,则必须安装 Java SDK。您可以使用 JRE 在 Windows 下构建 iOS 应用程序,但不能构建 Android 应用程序。

  4. Ruby 用于创建 Touch 使用的编译后的 CSS。

    • Windows:从 rubyinstaller.org 下载 Ruby。下载 RubyInstaller .exe 文件并运行它。

    • Mac:Ruby 已预安装。您可以使用 ruby -v 命令验证其是否存在。

    • Ubuntu:使用 sudo apt-get install ruby2.0.0 下载并安装 Ruby。

  5. Sencha Cmd.
    Sencha Touch 2.3.1 需要 Sencha Cmd 4.0.1、4.0.2 或更高版本。要检查您是否已正确安装 Sencha Cmd,请键入 sencha 命令,例如

    $ sencha
    Sencha Cmd vn.n.n
    ...

如果您在 Windows 上运行 IIS Web 服务器,请手动将 application/x-json 添加为 MIME 类型,以使 Sencha Touch 正常工作。有关添加此 MIME 类型的详细信息,请参阅 此链接

安装

解压缩 Sencha Touch 下载的 zip 文件,该文件可以位于任何目录中。

启动您的 Web 服务器。如果您使用 Sencha Cmd Web 服务器,请更改目录到您要提供应用程序的目录,并使用 sencha& web start 命令启动 Sencha Cmd Web 服务器。要停止 Web 服务器,请按 CTRL+C,或打开另一个命令行窗口并键入 sencha web stop

如果您使用其他 Web 服务器,例如 XAMPP(预配置的 Apache HTTP 服务器),请创建一个您的 Web 服务器期望找到应用程序的应用程序目录。在 XAMPP 的情况下,它是 XAMPP_install_dir/htdocs 目录。

生成您的第一个应用程序

现在您已经安装了 Sencha Touch 和 Sencha Cmd,您可以生成一个应用程序。

选择或创建一个您的应用程序将驻留的目录,更改到该目录,并发出以下命令

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

其中

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

这将生成一个命名空间为 MyApp 变量的 Sencha Touch 应用程序骨架,并位于当前目录中。

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

您可以通过在 Web 浏览器中打开应用程序来验证您的应用程序是否已成功生成。如果您将 SDK 解压缩到您的 Webroot 文件夹,请导航到 http://localhost/MyApp。如果您使用的是 Sencha Cmd Web 服务器,则可以使用 http://localhost:1841/ URL 访问提供的应用程序。

注意:如果此命令在 Linux 中失败,请以普通用户身份重新安装 Sencha Cmd,而不是以 root 权限安装。

探索代码

以下列表简要描述了每个文件和目录

  • app - 包含应用程序的模型、视图、控制器和存储的目录。
  • app.js - 应用程序的主要 JavaScript 入口点。
  • app.json - 应用程序的配置文件。
  • index.html - 应用程序的 HTML 文件。
  • packager.json - Sencha Cmd 用于为您的应用程序创建原生包的配置文件。
  • resources - 包含应用程序的 CSS 和图像的目录

在您的编辑器中打开 app.js,这是应用程序的主要入口点。

launch 函数是应用程序的入口点。在默认应用程序中,隐藏应用程序加载指示器,并创建我们的 Main 视图的实例,并将其添加到 Viewport。

Viewport 是一个 [[touch: Ext.layout.Card Card Layout]],您可以向其中添加应用程序组件。默认应用程序将 Main 视图添加到 Viewport,使其在屏幕上可见。

查看 Main 视图中的代码。

在代码编辑器中打开app/view/Main.js,并将标题行更改为

title: 'Home Tab'

然后将另一行更改为以下内容

title: 'Woohoo!'

此外,将以下几行更改为

html: [
    "I changed the default **HTML Contents** to something different!"
].join("")

刷新浏览器中的应用程序以查看更改的效果。

下一步

按照第一个应用程序指南进行操作,该指南建立在此指南的基础上,并帮助您在约 15 分钟内创建一个简单但功能强大的应用程序。

注意:作为一种良好的做法,在创建应用程序时,请保留app.js文件的副本,因为 Sencha Cmd 也会更新此文件。

Sencha Touch 2.4