文档中的 ExtJS 管理仪表板示例

Question

我正在尝试了解管理仪表板示例中的连接方式，此处的注册页面：http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/?classic#register

仅供参考，我已阅读有关快速入门和指南的整个文档（其中几乎包括所有内容），但我发现很少有我无法连接的东西。也许文档需要改进，或者我只是愚蠢。我去看看是不是后者。

这是应用程序的完整源代码：https://github.com/bjornharrtell/extjs/tree/master/templates/admin-dashboard。我正在使用经典版本。

现在注册页面，主视图是这样的：https://github.com/bjornharrtell/extjs/blob/master/templates/admin-dashboard/classic/src/view/authentication/Register.js

我的问题是：

1. 在第 25 行：cls:'auth-dialog-register'。这意味着一个额外的 css 类被添加到组件中。现在我搜索了 scss 文件，并没有在任何地方找到此类的样式定义。由于这个组件是“authdialog”，我特别查看了这个文件：https://github.com/bjornharrtell/extjs/blob/master/templates/admin-dashboard/classic/sass/src/view/authentication/Dialog.scss，但我在任何地方都找不到“auth-dialog-register”。该类在哪里定义？或者它没有被使用（在那种情况下，无赖）

2. 与第 42 行和第 57 行类似，文本框附加了一个类 'auth-textbox'，但我找不到它的样式在哪里定义。

3. 继续，在第 49 行，对于文本字段，定义了“触发器”配置。在文档中它在这里：http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.field.Text.html#cfg-triggers，它真的没有解释任何东西，只是一堆代码。同样在 Register.js 文件的下一行，第 50 行，它在触发器内有一个“字形”配置。同样，我无法在文档中找到它的用途。当然这个想法很清楚，它用于文本框触发器，但我需要确定我知道发生了什么。

4. 我的下一个问题可能与上一个问题有关。如果您查看示例页面：http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/?classic#register，您会看到所有文本框都有一个图标，说明该字段的用途：电子邮件字段有一个电子邮件图标。那是怎么来的？我很确定这与我之前问题中的触发器配置有关。根据文档https://docs.sencha.com/extjs/6.0.2/guides/core_concepts/font_ext.html，我应该使用“iconCls”配置，但这里没有使用。

请有人解释一下。提出这些问题合理吗？或者我应该能够弄清楚它们吗？我是 ExtJS 的新手，刚开始学习 2 周。

Answer 1

1/2) 似乎它们是未使用的类。我会开一张票来移除它们。

3) 触发器是类似按钮的东西，可以附加到字段中。正如文档中所说，它们是Ext.form.trigger.Trigger 的一组配置，这些选项可以在这里找到：http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.trigger.Trigger.html

glyphed 不是配置，而是字段中该触发器的“标签”。

4) 那是一些自定义 css，由触发器中使用的类应用。

.password-trigger,
.auth-email-trigger,
.auth-password-trigger,
.auth-envelope-trigger {
    &:before{
        top: 10px;
        left: -18px;
        position: relative;
        color: $dialog-trigger-color;
        font-size: 30px;
    }

    &.password-trigger:before,
    &.auth-password-trigger:before {
        content: "\f023";
    }

    &.auth-email-trigger:before {
        content: "\f007";
    }

    &.auth-envelope-trigger:before {
        content: "\f0e0";
    }
}