许多类在使用配置对象创建(实例化)类时都有快捷名称。快捷名称被称为 alias
(或 xtype
,如果该类扩展自 Ext.Component)。alias/xtype 在适用类的类名旁边列出,以便快速参考。
框架类或其成员可以指定为 private
或 protected
。否则,类/成员为 public
。Public
、protected
和 private
是访问描述符,用于传达类或类成员应该如何以及何时使用。
Public 类和类成员可供任何其他类或应用程序代码使用,并且在主要产品版本中可以作为稳定和持久的内容依赖。公共类和成员可以通过子类安全地扩展。
Protected 类成员是稳定的 public
成员,旨在供拥有类或其子类使用。受保护的成员可以通过子类安全地扩展。
Private 类和类成员在框架内部使用,不供应用程序开发人员使用。私有类和成员可能会在任何时候更改或从框架中省略,恕不另行通知,不应在应用程序逻辑中依赖。
static
标签。*请参阅下面的静态。下面是一个示例类成员,我们可以对其进行剖析,以显示类成员的语法(在本例中是从 Ext.button.Button 类查看的 lookupComponent 方法)。
让我们看一下成员行的每个部分
lookupComponent
)( item )
)Ext.Component
)。对于不返回除 undefined
之外的任何内容的方法,可以省略此项,或者可以显示为由正斜杠 /
分隔的多个可能值,表示返回的内容可能取决于方法调用的结果(即,如果 get 方法调用成功,方法可能返回 Component,如果失败,则返回 false
,这将显示为 Ext.Component/Boolean
)。PROTECTED
- 请参阅下面的标志部分)Ext.container.Container
)。如果成员源自当前类,则源类将显示为蓝色链接;如果成员从祖先类或混入类继承而来,则显示为灰色。view source
)item : Object
)。undefined
之外的值,“返回值”部分将注明返回的类或对象类型以及描述(示例中的 Ext.Component
)Available since 3.4.0
- 示例中未显示),紧接在成员描述之后Defaults to: false
)API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。
classInstance.method1().method2().etc();
false
,则标记为可阻止的事件将不会触发- 表示框架类
- Singleton 框架类。*有关更多信息,请参阅 singleton 标志
- 组件类型框架类(Ext JS 框架中扩展 Ext.Component 的任何类)
- 表示类、成员或指南是当前查看版本中的新内容
- 表示 config
类型的类成员
- 表示 property
类型的类成员
- 表示 method
类型的类成员
- 表示 event
类型的类成员
- 表示 theme variable
类型的类成员
- 表示 theme mixin
类型的类成员
- 表示类、成员或指南是当前查看版本中的新内容
在 API 文档页面上的类名下方,是一行按钮,对应于当前类拥有的成员类型。每个按钮显示按类型划分的成员计数(此计数会随着过滤器的应用而更新)。单击按钮会将您导航到该成员部分。将鼠标悬停在成员类型按钮上将显示该类型的所有成员的弹出菜单,以便快速导航。
与类 config 选项相关的 Getter 和 setter 方法将显示在方法部分以及 API 文档和成员类型菜单的 configs 部分中,就在它们所处理的 config 下方。Getter 和 setter 方法文档将在 config 行中找到,以便于参考。
您的页面历史记录保存在本地存储中,并显示在顶部标题栏下方(使用可用的实际空间)。默认情况下,显示的唯一搜索结果是与您当前查看的产品/版本匹配的页面。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来扩展显示的内容。这将显示历史记录栏中所有产品/版本的所有最近页面。
在历史记录配置菜单中,您还将看到最近访问页面的列表。结果按“当前产品/版本”和“全部”单选按钮过滤。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。
如果在历史记录配置菜单中选择“全部”,“在历史记录栏中显示产品详细信息”的复选框选项将启用。选中后,每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也会将产品/版本显示为工具提示。
可以使用页面顶部的搜索字段搜索 API 文档和指南。
在 API 文档页面上,还有一个过滤器输入字段,用于使用过滤器字符串过滤成员行。除了按字符串过滤外,您还可以按访问级别、继承和只读过滤类成员。这是通过使用页面顶部的复选框完成的。
API 类导航树底部的复选框过滤类列表以包含或排除私有类。
单击空的搜索字段将显示您最近的 10 次搜索,以便快速导航。
每个 API 文档页面(Javascript 原始页面除外)都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项
Ext.button.Button
类具有 Ext.Button
的备用类名)。备用类名通常是为了向后兼容性而维护的。可运行的示例 (Fiddles) 默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。
类成员默认在页面上折叠。您可以使用成员行左侧的箭头图标或右上角的展开/折叠全部切换按钮全局展开和折叠成员。
在较窄的屏幕或浏览器上查看文档将导致针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别在于
可以通过单击 API 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。
本指南将引导您完成将 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
,具有三个字段,分别名为 id
、name
和 email
,到“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
文件是自动为您生成的。确保您的 Web 服务器以正确的 Content-Type
标头 text/cache-manifest
为其提供服务。要了解有关 HTML5 应用程序缓存的更多信息,请参阅 HTML5 Rocks 教程 应用程序缓存初学者指南。
packager.json
包含打包应用程序的所有可配置值。
如果您使用的是 OS X 并且安装了 XCode,则以下命令将打包您的应用程序并在 iOS 模拟器上运行它
sencha app build native
有关使用 Sencha Cmd 的常见问题,请参阅 Sencha Cmd 简介的故障排除部分。
默认情况下,新的 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/",
// ...
}
这应被视为临时措施,因为它不允许计划的编译器优化自动使您的应用程序受益。