许多类在使用配置对象创建(实例化)时使用快捷名称。快捷名称被称为别名
(如果类扩展了 Ext.Component,则称为xtype
)。别名/xtype 列在适用类的类名旁边,以便快速参考。
框架类或其成员可以指定为private
或protected
。否则,该类/成员为public
。Public
、protected
和private
是访问描述符,用于传达如何以及何时使用该类或类成员。
Public 类和类成员可供任何其他类或应用程序代码使用,并且可以在主要产品版本中作为稳定且持久的成员使用。公共类和成员可以通过子类安全地扩展。
Protected 类成员是稳定的public
成员,旨在供拥有类或其子类使用。受保护的成员可以通过子类安全地扩展。
Private 类和类成员由框架内部使用,不打算供应用程序开发人员使用。私有类和成员可能会随时更改或从框架中删除,恕不另行通知,并且不应在应用程序逻辑中依赖它们。
static
标签。*参见下面的静态。以下是一个示例类成员,我们可以对其进行分析以显示类成员的语法(在本例中,从 Ext.button.Button 类中查看 lookupComponent 方法)。
让我们看看成员行中的每个部分
lookupComponent
)( item )
)Ext.Component
)。对于不返回任何内容(除了undefined
)的方法,这可以省略,或者可以显示为用正斜杠/
分隔的多个可能的值,表示返回的内容可能取决于方法调用的结果(例如,如果 get 方法调用成功,则方法可能返回一个组件,如果失败则返回false
,这将显示为Ext.Component/Boolean
)。PROTECTED
- 请参阅下面的标志部分)Ext.container.Container
)。如果成员来自当前类,则源类将显示为蓝色链接,如果它从祖先类或混合类继承,则显示为灰色。查看源代码
)item : Object
)。undefined
,则“返回值”部分将记录返回的类或对象的类型以及描述(示例中的Ext.Component
)。自 3.4.0 起可用
- 示例中未显示),紧接在成员描述之后。默认值为:false
)。API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。
classInstance.method1().method2().etc();
false
,则不会触发- 表示框架类
- 单例框架类。*有关更多信息,请参阅单例标志
- 组件类型框架类(Ext JS 框架中任何扩展 Ext.Component 的类)
- 表示该类、成员或指南是当前查看版本中的新增内容
- 表示类型为config
的类成员
- 表示类型为property
的类成员
- 表示类型为method
的类成员
- 表示类型为event
的类成员
- 表示类型为主题变量
的类成员
- 表示类型为主题混合
的类成员
- 表示该类、成员或指南是当前查看版本中的新增内容
在 API 文档页面上的类名称下方,有一排按钮,对应于当前类拥有的成员类型。每个按钮都显示了按类型划分的成员数量(此数量会随着应用过滤器而更新)。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示一个包含该类型所有成员的弹出菜单,以便快速导航。
与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中,紧挨着它们所关联的配置。Getter 和 Setter 方法文档将在配置行中找到,以便于参考。
您的页面历史记录保存在本地存储中,并在顶部标题栏下方显示(使用可用的空间)。默认情况下,仅显示与您当前查看的产品/版本匹配的页面搜索结果。您可以通过单击历史记录栏右侧的按钮并选择“全部”单选按钮来扩展显示的内容。这将显示所有产品/版本的历史记录栏中的所有最近页面。
在历史记录配置菜单中,您还将看到最近页面访问的列表。结果会根据“当前产品/版本”和“全部”单选按钮进行过滤。单击按钮将清除历史记录栏以及保存在本地存储中的历史记录。
如果在历史记录配置菜单中选择了“全部”,则“在历史记录栏中显示产品详细信息”的复选框选项将被启用。选中后,每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将鼠标悬停在历史记录栏中的页面名称上也会显示产品/版本作为工具提示。
可以使用页面顶部的搜索字段搜索 API 文档和指南。
在 API 文档页面上,还有一个过滤器输入字段,使用过滤器字符串过滤成员行。除了按字符串过滤外,您还可以按访问级别、继承和只读来过滤类成员。这是通过页面顶部的复选框完成的。
API 类导航树底部的复选框用于过滤类列表,以包含或排除私有类。
单击空的搜索字段将显示您最近的 10 次搜索,以便快速导航。
每个 API 文档页面(除了 Javascript 原语页面)都有一个与该类相关的元数据的菜单视图。此元数据视图将包含以下一项或多项
Ext.button.Button
类有一个备用类名称 Ext.Button
)。备用类名称通常为了向后兼容而维护。默认情况下,可运行示例(Fiddles)在页面上展开。您可以使用代码块左上角的箭头分别折叠和展开示例代码块。您也可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间保存。
默认情况下,类成员在页面上折叠。您可以使用成员行左侧的箭头图标或使用右上角的展开/折叠所有切换按钮全局展开和折叠成员。
在较窄的屏幕或浏览器上查看文档将导致视图针对较小的外形尺寸进行优化。桌面视图和“移动”视图之间的主要区别在于
可以通过单击 API 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。
Sencha Touch 是一个高性能 HTML5 移动应用程序框架。您可以使用 Sencha Touch 在浏览器或混合外壳中创建类似原生应用程序的体验。Sencha Touch 支持 Android、iOS、Windows Phone、Microsoft Surface Pro 和 RT 以及 BlackBerry 设备。
下载并解压缩 Sencha Touch。您可以将软件解压缩到任何目录。
Sencha Touch 需要
Java 运行时环境 版本 1.7。Sencha Cmd 是用 Java 编写的,需要 JRE 才能运行。注意:如果您使用 Windows 构建 Android 应用程序,则必须安装 Java SDK。您可以使用 JRE 在 Windows 下构建 iOS 应用程序,但不能构建 Android 应用程序。
Ruby 用于创建 Touch 使用的编译后的 CSS。
Windows:从 rubyinstaller.org 下载 Ruby。下载 RubyInstaller .exe
文件并运行它。
Mac:Ruby 已预安装。您可以使用 ruby -v 命令验证其是否存在。
Ubuntu:使用 sudo apt-get install ruby2.0.0 下载并安装 Ruby。
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
其中
/path/to/touch
是您解压缩 Touch 软件的目录。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 也会更新此文件。