文档帮助

术语、图标和标签

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

访问级别

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

成员类型

成员语法

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

lookupComponent ( item ) : Ext.Component
protected

当在 items 配置的初始化期间或添加新项目时,将原始配置对象添加到此容器中时调用 added), or {@link #insert inserted.

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

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

参数

item :  Object

正在添加的配置对象。

返回值
Ext.Component

要添加的组件。

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

成员标志

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

类图标

- 表示框架类

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

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

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

成员图标

- 表示类型为 config 的类成员

- 表示类型为 property 的类成员

- 表示类型为 method 的类成员

- 表示类型为 event 的类成员

- 表示类型为 theme variable 的类成员

- 表示类型为 theme mixin 的类成员

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

类成员快速导航菜单

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

Getter 和 Setter 方法

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

历史记录栏

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

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

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

搜索和过滤器

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

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

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

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

API 文档类元数据

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

展开和折叠示例和类成员

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

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

桌面 -vs- 移动视图

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

查看类源代码

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

Cmd


顶部

Fashion

简介

随着 Sencha Cmd 6.0 的发布,我们很高兴推出一个用于开发 Ext JS 6.0 主题的新型快速工具,名为“Fashion”。将 Fashion 和 sencha app watch 结合使用,创建了一种新的主题开发模式,我们称之为“实时更新”。

实时更新使用 Fashion 编译,然后将最新的 CSS 注入到正在运行的页面中。这意味着您无需重新加载即可查看主题更改,而是直接在浏览器中近乎实时地看到这些更新。

Sencha Cmd 6 在为 Ext JS 6 应用程序编译主题时也使用 Fashion。由于 Fashion 是用 JavaScript 实现的,因此不再需要 Ruby。

什么是 Fashion?

Fashion 是一个用于 .scss 文件的编译器,用于生成 CSS。Fashion 还添加了一些 Sass 中没有的新功能,这些功能允许像 Sencha Inspector 这样的工具直观地检查和编辑主题(或您的应用程序)定义的变量。

JavaScript 扩展

用户可以通过编写 JavaScript 模块来扩展 Fashion 的功能。一般来说,Ext JS 用户可能最熟悉 JavaScript,因此扩展行为应该比扩展 Compass 简单得多。我们将在下面详细讨论扩展 Fashion。

现在,让我们开始介绍 Fashion!

兼容性

Fashion 与 CSS3 语法以及大多数 sass-spec 验证套件兼容。由于 Fashion 确实理解大多数 Sass 代码,因此将现有的 .scss 代码编译为使用 Fashion 应该不难。

然而,由于后面讨论的附加功能,说 Fashion “是 Sass 的实现” 或 Fashion 编译的语言“是 Sass”是不正确的。在许多地方,单词“sass”用作磁盘上配置选项或文件夹的名称。出于兼容性原因,即使底层语言并非严格意义上的“Sass”,这些配置选项仍然命名为“sass”。

使用实时更新

您可以在(现代)浏览器中打开应用程序,Sass 文件将被加载,而不是生成的 CSS。然后,Fashion 可以对文件更改做出反应,重新编译 Sass 并更新 CSS,而无需重新加载页面。

有两种方法可以启用 Fashion 以在 sencha app watch 中使用。

您可以通过编辑 app.json 中的“development”对象来启用 Fashion。

...
"development": {
    "tags": [
        "fashion"
    ]
},
...

或者,您可以在加载页面时将“?platformTags=fashion:1”添加到您的 URL 中。

现在我们准备启动

  • 从应用程序的根文件夹执行“sencha app watch”。
  • 将浏览器导航到您的应用程序(例如,http://localhost:1841/app)。

您现在应该能够修改主题变量并几乎立即看到更改。

注意:实时更新仅在从 Cmd Web 服务器查看页面时才有效。在 Ext JS 经典工具包中,某些 Sass 更改可能需要布局或完整页面重新加载。这在现代工具包中将不再是一个问题,因为它更多地基于 CSS3,并将重新调整以适应更激进的更改。

语言扩展

动态变量

动态变量在 Fashion 中扮演着非常重要的角色。动态变量类似于普通变量,但它们的值包装在“dynamic()”中。使动态变量与普通变量不同的原因是它们如何相互作用。考虑

$bar: dynamic(blue);

$foo: dynamic($bar);  // Notice $foo depends on $bar

$bar: dynamic(red);

@debug $foo;  // red

请注意,$foo 是从 $bar 计算出来的。Fashion 对这种依赖关系进行特殊处理,$foo 的计算将推迟到 $bar 的最终值已知时。

换句话说,动态变量在两个阶段处理:赋值和求值。

赋值

动态变量与普通变量一样,以正常的“级联”顺序赋值(与 !default 不同)

$bar: dynamic(blue);

$bar: dynamic(red);

@debug $bar;  // red

这允许工具将自定义值追加到任何代码块并控制其动态变量。

对动态变量的赋值只能在文件范围内且在任何控制结构之外进行。例如,这是非法的

$bar: dynamic(blue);

@if something {
    $bar: dynamic(red); // ILLEGAL
}

应该使用以下形式代替上述形式

$bar: dynamic(if(something, red, blue));

此要求对于启用下面讨论的求值和提升行为是必要的。

动态变量可以在声明后使用或不使用 dynamic() 包装器进行赋值。

$bar: dynamic(blue);

$bar: red;  // reassigns $bar to red

$bar: green !default;  // reassigns $bar to green

@debug $bar;  // green

没有“默认动态”这样的东西。

求值

动态变量以依赖关系顺序求值,而不是声明顺序。声明顺序仅适用于单个变量赋值的级联。这可以在上面的示例中看到。这种排序也意味着我们甚至可以删除 $bar 的第一个设置,代码将具有相同的结果。

考虑更复杂的示例

$bar: dynamic(mix($colorA, $colorB, 20%));

$bar: dynamic(lighten($colorC, 20%));

$bar 的原始表达式使用了 $colorA$colorB。如果这是对 $bar 的唯一赋值,那么 $bar 将依赖于这两个变量,并在它们之后求值。由于 $bar 被重新赋值,并且随后只使用了 $colorC,因此在最终分析中,$bar 仅依赖于 $colorC。对 $bar 的原始赋值可能从未发生过。

提升

为了实现所有这些,Fashion 收集所有动态变量并在执行任何其他 Sass 代码之前对它们进行求值。换句话说,类似于 JavaScript 变量,动态变量被“提升”到顶部。

提升

当变量用于赋值动态变量时,这些变量将被提升为动态变量。

$foo: blue;

$bar: dynamic($foo);

即使 $foo 被声明为普通变量,因为 $bar 使用了 $foo,Fashion 将提升 $foo 为动态变量。

注意:这意味着 $foo 现在必须遵循动态变量的规则。

这种行为是为了最大限度地提高与之前版本的 Sencha Cmd 的兼容性而支持的。当变量被提升时,会生成警告。在将来的版本中,此警告将变为错误。我们建议您将此代码更改为正确地将所需变量声明为dynamic()

扩展 - 要求 JavaScript

您可以通过在 JavaScript 中编写代码来扩展 Fashion。要从需要它的 Sass 代码中引用此代码,请使用require()。例如

require("my-module");

// or

require("../path/file.js"); // relative to scss file

在内部,Fashion 使用 ECMAScript 6 (ES6) System.import API(或其通过 polyfillSystemJS)来支持加载标准 JavaScript 模块。

模块可以用 pre-ES6 语法编写,如下所示

exports.init = function(runtime) {
    runtime.register({
        magic: function (first, second) {
            // ...
        }
    });
};

使用 SystemJS,您可以启用“转译器”以在任何浏览器中编写 ES6 代码。上面的代码在 ES6 中将如下所示

module foo {
    export function init (runtime) {
        runtime.register({
            magic: function (first, second) {
                // ...
            }
        });
    }
}

升级

动态变量

升级到 Ext JS 6 时,动态变量的内部使用可能会影响这些变量在应用程序和自定义主题中的分配方式。虽然没有必要,但我们建议您更改变量分配以使用 dynamic()。在大多数情况下,这将是机械地将 !default(之前版本中采用的方法)替换为 dynamic()

// before:

$base-color: green !default;

// after:

$base-color: dynamic(green);

这将使根据对动态变量的更严格的分配性质生成的错误更加明显。

Compass 扩展

依赖于 Ruby 代码的 Compass 功能将不可用,因为 Ruby 不再被使用。将不得不使用 JavaScript 创建等效的功能。在许多情况下,可以使用require()在 JavaScript 中实现缺少的功能来提供等效的功能。但是,Compass 的 Sass 代码包含在 Fashion 中,因此并非所有 Compass 功能都受到影响。一般来说,如果您没有使用任何自定义或基于 Ruby 的 Compass 功能,您很可能不需要进行任何更改。

结论

我们对 Fashion 非常兴奋,希望您也是!快速为您的应用程序设置主题从未如此简单,并且现在可以使用与框架相同的语言扩展 Sass。请务必在 论坛 上给我们留下任何反馈。

Cmd