文档帮助

术语、图标和标签

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

访问级别

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

成员类型

成员语法

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

lookupComponent ( item ) : Ext.Component
protected

当原始配置对象在初始化 items 配置期间添加到此容器,或者当新项目被 added 或 {@link #insert inserted} 时调用。

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

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

参数

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 文档和成员类型菜单的 configs 部分中,就在它们所处理的 config 下方。Getter 和 setter 方法文档将在 config 行中找到,以便于参考。

历史记录栏

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

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

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

搜索和过滤器

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

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

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

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

API 文档类元数据

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

展开和折叠示例和类成员

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

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

桌面 -vs- 移动视图

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

查看类源代码

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

Cmd 7.8.0


顶部

将 Sencha Cmd 与 Sencha Touch 结合使用

简介

本指南将引导您完成将 Sencha Cmd 与 Sencha Touch 应用程序结合使用的过程,从 sencha generate app 命令开始,到运行应用程序结束。

本指南适用于新的 Sencha Touch 应用程序以及现有 Sencha Touch 2 应用程序的升级。

先决条件

建议在继续之前阅读以下指南

创建新应用程序

以下命令使用命名空间 MyApp 生成一个新应用程序到 "/path/to/www/myapp"

#  Make sure the current working directory is the Sencha Touch SDK
cd /path/to/sencha-touch-sdk
sencha generate app MyApp /path/to/www/myapp

或者,您可以在命令行上指定 SDK 的路径

sencha -sdk /path/to/sencha-touch-sdk generate app MyApp /path/to/www/myapp

要试用它,只需将任何基于 WebKit 的浏览器指向 https://127.0.0.1/myapp

恭喜您。您刚刚在几秒钟内创建了一个功能齐全的 Sencha Touch 应用程序。

了解您的应用程序的结构

生成的应用程序应具有以下文件结构

.sencha/                # Sencha-specific files (for example configuration)
    app/                # Application-specific content
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd
    workspace/          # Workspace-specific content (see below)
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd

touch/                  # A copy of the Sencha Touch SDK
    cmd/                # Sencha Touch-specific content for Sencha Cmd
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd
    src/                # The Sench Touch source
    sencha-touch-*.js   # Pre-compiled and bootstrap files
    ...

app                     # Your application's source code in MVC structure
    controller
    model
    profile
    store
    view
        Main.js         # The main view of the application

resources
    css
        app.css         # The main stylesheet, compiled from app.scss

    sass
        app.scss        # The Sass file which compiles to app.css above,
                        # includes Sencha Touch theme by default

    icons               # Application icons for all mobile devices
                        # When replacing these default images with your own,
                        # make sure the file name and the dimension stays exactly the same
        ...
    loading             # Application start-up screens for iOS devices
                        # Similarly to icons, make sure the file names and
                        # dimension stays the same
        ...
    images              # Put other images used by your application here

index.html
app.js                  # Contains application's initialization logic
app.json                # Application descriptor
packager.json           # Configuration for native packaging

“app.json”和“packager.json”都具有每个可配置项的内联文档。只需打开文件并根据需要进行编辑即可。

开发您的应用程序

使用 sencha generate 命令系列可帮助您快速生成常见的 MVC 组件。

重要提示。 确保将当前目录设置为应用程序的根文件夹。

例如

cd /path/to/www/myapp
sencha generate model User id:int,name,email

此命令生成一个新的 Model 类,名为 User,具有三个字段,分别名为 idnameemail,到“app/model/User.js”,并将其引用添加到您的“app.js”文件。

升级您的应用程序

生成的应用程序始终拥有其自己的 SDK 副本,它们最初是从该 SDK 生成的。将您的应用程序升级到新版本的 SDK 意味着您必须用新版本替换旧版本。使用命令 sencha app upgrade 执行此操作。

重要提示 确保将当前目录设置为应用程序的根文件夹。

这是一个更完整的示例

cd /path/to/www/myapp
sencha app upgrade /path/to/new_version_of_sdk

部署您的应用程序

开发您的应用程序仅仅意味着编辑源代码并刷新浏览器。所有源文件都按需动态加载。不涉及构建过程。在部署方面,Sencha Cmd 提供了以下四个构建环境选项

  • testing - 旨在用于生产前的 QA。所有 JavaScript 和 CSS 源文件都捆绑在一起,但未缩小,这使得调试更容易。
  • package - 创建一个自包含的、可重新分发的生产版本,通常从本地文件系统运行,而无需 Web 服务器。
  • production - 创建一个生产版本,该版本通常托管在 Web 服务器上并为多个客户端(设备)提供服务。该构建可以使用 HTML 5 应用程序缓存进行离线操作,并启用执行空中更新。
  • native - 首先生成 package 构建,然后将其打包为本机应用程序,准备部署到本机平台。

例如,以下命令生成应用程序的 testing 构建。

重要提示。 确保将当前目录设置为应用程序的根文件夹。

cd /path/to/www/myapp
sencha app build testing

同样,当您准备好进行生产部署时

cd /path/to/www/myapp
sencha app build production

默认部署路径取自 app.json 中的 buildPaths 项。有关可选参数的更多详细信息,请运行以下命令

cd /path/to/www/myapp
sencha help app build

Sencha Cmd 自动化了应用程序的所有优化,包括以下内容

  • 解析应用程序所需的依赖项,并且仅包含确切使用的内容,以实现最佳文件大小/性能。
  • 通过自动生成“cache.manifest”和资源校验和来启用 HTML5 应用程序缓存。
  • 缩小所有 JavaScript 和 CSS 资源。
  • 首次加载时将所有 JavaScript 和 CSS 资源存储在本地存储中,并通过版本之间的增量更新对其进行修补。

因此,您的生产版本可以在后续访问时立即加载,并以最小的网络传输量进行动态更新。

重要提示。 cache.manifest 文件是自动为您生成的。确保您的 Web 服务器以正确的 Content-Type 标头 text/cache-manifest 为其提供服务。要了解有关 HTML5 应用程序缓存的更多信息,请参阅 HTML5 Rocks 教程 应用程序缓存初学者指南

打包您的应用程序以在应用商店中分发

packager.json 包含打包应用程序的所有可配置值。

如果您使用的是 OS X 并且安装了 XCode,则以下命令将打包您的应用程序并在 iOS 模拟器上运行它

sencha app build native

故障排除

有关使用 Sencha Cmd 的常见问题,请参阅 Sencha Cmd 简介的故障排除部分。

解析依赖项时出错 - 第 2 部分

默认情况下,新的 Sencha Cmd 编译器用于确定依赖项。与以前的版本不同,编译器通过处理源代码(应用程序和框架)来确定依赖项。在某些情况下,这可能会导致缺少依赖项,即以前版本中自动检测到但在编译器中未检测到的依赖项。

在这种情况下,理想的解决方案是添加缺少的 requires 语句以解决问题。这可能包括将覆盖切换到新的命名形式,例如

Ext.define('MyApp.patches.foo.Bar', {
    override: 'Ext.foo.Bar',
    ...
});

这使得可以通过名称需要覆盖,因此编译器可以按正确的顺序处理它们。

如果需要推迟这项工作,您可以启用 V2 兼容模式(基于通过文件系统协议在无头 WebView 内部启动应用程序以提取依赖项)。为此,请使用以下命令代替 sencha app build

sencha config -prop v2deps=true then app build

或者,您可以将以下行添加到您的“.sencha/app/sencha.cfg”文件并像以前一样运行 sencha app build

v2deps=true

在这种旧模式下,如果您的应用程序依赖于任何动态服务器端脚本(例如,从 PHP 脚本加载类配置),则必须将 app.json 中的 url 项设置为可以从 Web 浏览器加载应用程序的绝对 URL。例如

// app.json
{
    "url": "https://127.0.0.1/myapp/",
    // ...
}

这应被视为临时措施,因为它不允许计划的编译器优化自动使您的应用程序受益。

下一步

Cmd 7.8.0