许多类在使用配置对象创建(实例化)类时都有快捷名称。快捷名称被称为 alias
(别名)(如果类扩展了 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 方法调用成功,方法可能会返回 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
,则标记为可阻止的事件将不会触发- 表示框架类
- 单例框架类。*有关更多信息,请参阅单例标志
- 组件类型框架类(Ext JS 框架中扩展 Ext.Component 的任何类)
- 表示类、成员或指南在当前查看的版本中是新的
- 表示类型为 config
的类成员
- 表示类型为 property
的类成员
- 表示类型为 method
的类成员
- 表示类型为 event
的类成员
- 表示类型为 theme variable
的类成员
- 表示类型为 theme mixin
的类成员
- 表示类、成员或指南在当前查看的版本中是新的
在 API 文档页面上的类名下方,是一行按钮,对应于当前类拥有的成员类型。每个按钮都显示按类型划分的成员计数(此计数会随着过滤器的应用而更新)。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示该类型的所有成员的弹出菜单,以便快速导航。
与类配置选项相关的 Getter 和 setter 方法将在方法部分以及 API 文档和成员类型菜单的配置部分中显示,就在它们所作用的配置下方。Getter 和 setter 方法文档将在配置行中找到,以便于参考。
您的页面历史记录保存在本地存储中,并显示在顶部标题栏下方(使用可用的实际空间)。默认情况下,显示的唯一搜索结果是与您当前查看的产品/版本匹配的页面。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来展开显示的内容。这将显示所有产品/版本的所有最近页面历史记录栏。
在历史记录配置菜单中,您还将看到最近页面访问的列表。结果按“当前产品/版本”和“全部”单选按钮过滤。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。
如果在历史记录配置菜单中选择“全部”,则将启用“在历史记录栏中显示产品详细信息”复选框选项。选中后,每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也会将产品/版本显示为工具提示。
可以使用页面顶部的搜索字段搜索 API 文档和指南。
在 API 文档页面上,还有一个过滤器输入字段,该字段使用过滤器字符串过滤成员行。除了按字符串过滤外,您还可以按访问级别、继承和只读来过滤类成员。这是通过使用页面顶部的复选框完成的。
API 类导航树底部的复选框过滤类列表,以包含或排除私有类。
单击空的搜索字段将显示您最近 10 次搜索,以便快速导航。
每个 API 文档页面(Javascript 原始页面除外)都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项
Ext.button.Button
类具有 Ext.Button
的备用类名)。备用类名通常为了向后兼容性而维护。可运行的示例 (Fiddle) 默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。
类成员默认在页面上折叠。您可以使用成员行左侧的箭头图标或右上角的展开/折叠全部切换按钮全局展开和折叠成员。
在较窄的屏幕或浏览器上查看文档将导致针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别在于
可以通过单击 API 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。
本指南旨在帮助使用 Sencha Cmd 的开发人员从 ExtJS 4.1.1a+ 迁移到 ExtJS 5.0.x。尽管此版本中存在一些重要的更改,但我们已尽力使升级过程尽可能轻松。在深入探讨之前,值得一提的是,本指南做出了一些假设。
我们认识到并非所有客户都有幸运行最新版本的 Ext JS 和 Sencha Cmd。时间限制、截止日期和支持许可证通常决定了企业中使用哪个版本的 Ext JS。
花时间升级到最新版本的 Ext JS 4.x 和 Cmd 4.x 将使跳转到我们的 5.x 分支更加顺利。使用最新版本可确保您可以利用许多最近的错误修复并避免重大的 API 更改。
迁移过程的第一步是确保您的源代码控制系统中没有任何待处理的更改。不建议在您有其他更改正在进行时开始升级。这将使您可以更轻松地查看 Sencha Cmd 所做的更改,从而确保您所做的任何自定义仍然有效。
在升级期间,Sencha Cmd 可能需要对您也可能已编辑过的一些文件应用更改。与任何此类情况一样,您可能会编辑与 Sencha Cmd 需要更新的行相同的行,从而导致合并冲突。
好消息是,与版本控制一样,有一些工具可以帮助解决这些合并冲突。Sencha Cmd 可以使用您可以从命令行运行的任何可视化合并工具(几乎所有工具都是如此)。此步骤是可选的,但强烈建议这样做,因为它将使处理升级变得更加简单。
以下是一些流行的选择列表(有些是免费的,有些是商业的)
我们将在下一步配置 Sencha Cmd 以使用您首选的合并工具。
接下来,您需要获取最新版本的 Sencha Cmd 5。
您可以下载 Sencha Cmd 5 或查看下面的发行说明以了解已知问题
如果您已经在使用 Sencha Cmd 5,您可以从我们的下载页面获取最新的 Beta 版本或运行
sencha upgrade --beta
安装 Sencha Cmd 并重启您的终端。
注意: 如果您安装了以前版本的 Cmd,这不会替换它,但它将在运行 Cmd 软件时优先。有关详细信息,请参见上文。
如果您选择获取合并工具,我们需要配置 Sencha Cmd 以使用该合并工具。为此,您需要在配置文件中添加两个属性
cmd.merge.tool
cmd.merge.tool.args
我们可以在 Sencha Cmd 安装文件夹中的 "sencha.cfg"
文件中设置这些属性。或者,可以以版本独立的方式设置这两个属性,以便您的首选项适用于所有版本的 Sencha Cmd。有关详细信息,请参阅 "sencha.cfg"
文件的末尾。
我们已准备好开始升级。只需从应用程序的根文件夹运行此命令即可开始
sencha app upgrade -ext
您应该看到非常少量的绿色文本,告知您您的应用程序已成功升级。
在大多数情况下,您需要在应用程序开始按预期工作之前对其执行构建。这可以通过执行以下命令来完成
sencha app build
在以前版本的 Sencha Cmd 中,Ext JS 应用程序遵循的过程与 Sencha Touch 应用程序遵循的过程非常不同。这主要是由于 Sencha Touch “microloader”。在 Sencha Cmd 4 版本中,microloader 从 Sencha Touch 移至 Sencha Cmd,但当时 microloader 无法在 Ext JS 支持的所有浏览器上运行。
使用 Sencha Cmd 5 和 Ext JS 5,此限制不再适用。这意味着 Ext JS 5 应用程序现在可以使用与 Sencha Touch 相同的过程。这为一些非常有用的功能打开了大门。
为了利用这些功能,我们首先需要将标记页面从“x-compile”注释形式转换为 microloader 脚本标记和关联的 "app.json"
文件。在大多数情况下,这将是一个简单的将脚本和 CSS 引用移动到您的 "app.json"
文件的问题。以前版本的 Sencha Cmd 生成的默认标记如下所示
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="../ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app.js"></script>
<!-- </x-compile> -->
上面的标记应更改为如下所示
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>
"bootstrap.js"
文件由 Sencha Cmd 生成,用于加载 microloader 以及其他内容。此文件仅在开发模式下使用。上面的脚本标记在构建过程中被替换,很像以前的“x-compile”块被替换一样。
等效的 "app.json"
如下所示
{
"framework": "ext",
"css": [
{
"path": "bootstrap.css",
"bootstrap": true
}
],
"js": [
{
"path": "app.js",
"bundle": true
}
]
}
您可能会注意到 "ext-dev.js"
文件的 js
条目不存在。这是因为框架包(“ext”)是 Sencha Cmd 5 可以理解的内容,它会自动在您的工作区中找到它。
您可以在 "app.json"
文件中探索许多其他选项。此文件使您可以轻松访问包(使用“requires”),并且还允许您将选项传递到运行时。这是因为您的 "app.json"
文件的内容将作为 Ext.manifest
加载。
在以前版本的 Sencha Cmd 中,许多属性必须在 ".sencha/app"
文件中指定。在 Sencha Cmd 5 中,在许多情况下可以改为使用 app.json。app.json 的内容通过添加 app.
并使用“.”连接属性名称来展平为构建属性。例如,app.json 中的这两个属性
{
"theme": "ext-theme-crisp",
"sass": {
"namespace": "MyApp"
}
}
替换以前位于 ".sencha/app/sencha.cfg"
中的这些属性
app.theme=ext-theme-crisp
app.sass.namespace=MyApp
还有许多其他无法在 app.json 中指定的构建属性(通常是因为它们没有 app.
前缀),但建议您尽可能仅保留您可以在 "app.json"
中控制的那些属性。有关您可以在 app.json 中控制的内容的详细信息,请参阅该文件的注释。对于其他属性,请参阅 ".sencha/app/defaults.properties"
。
最后一步是从您的应用程序根文件夹构建 sencha app build
或 watch sencha app watch
。这两者中的任何一个都将更新您的应用程序并使其准备好使用。
使用 watch,您现在可以在您自己的 Web 服务器的 localhost 上或在 https://:1841 上查看应用程序,这是我们为您自动启动的服务器。Web 服务器现在是 app watch 的默认组成部分。在以前的版本中,您必须单独运行 sencha web start
才能使用 Sencha Cmd Web 服务器。您可以使用以下属性调整 Web 服务器配置(显示了它们的默认值)
build.web.port=1841
build.web.root=${workspace.dir}
在此版本中,我们优化了 watch,使其具有更快的启动时间,并且可以更好地与 Compass 共享工作,同时避免不必要的 Sass 编译。
如果您在应用程序中使用 Sencha Cmd 对 Cordova 或 PhoneGap 的集成支持,则升级过程将包括几个额外的步骤。
Sencha Cmd 5 在您的 app.json 文件中添加了对定义多个构建的支持。此支持非常适合本机打包。对于启用 Cordova 或 PhoneGap 的应用程序,“sencha app upgrade”命令将在您的 app.json
文件的顶部添加一些默认构建配置文件。这些构建配置文件提供了与以前版本的 Sencha Cmd 一致的命令界面,并向您展示了您可以完成的更多操作。
通过应用升级为 Cordova 应用程序添加的构建配置文件如下所示
"builds": {
"web": {
"default": true
},
"native": {
"packager": "cordova",
"cordova" : {
"config": {
"platforms": "ios",
...
}
}
}
},
这些构建配置文件确保所有“sencha app build”命令变体都等同于以前的版本。但是,您会注意到“native”现在是一个构建配置文件,而不是环境(如“testing”或“production”)。这意味着您现在可以执行“sencha app build native testing”,这在以前是不可能的。
由 Sencha Cmd 生成的新项目不再使用“cordova.local.properties”或“phonegap.local.properties”。如果您的应用程序具有这些文件,它们将继续工作。新项目应将个人属性(例如 PhoneGap Build 凭据)添加到标准“local.properties”文件。
就是这样!您的应用程序已升级到最新的 Ext JS 和 Sencha Cmd。在您测试完毕后,您可以提交更改(其中许多更改在 ".sencha"
文件夹中)。
如果您熟悉 Sencha Cmd,您可能已经注意到上面 Sencha Cmd 的控制台输出已显着减少。如果您喜欢原始日志记录级别,您可以通过在命令中添加 -info
重新启用它。例如
sencha -info app watch
如果您想要更少的输出,可以使用 -quiet
运行
sencha -quiet app watch
有关升级过程的更多信息,请查看这些指南