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

我的问题是：

在第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'。该课程在哪里定义？或者它没有被使用（在这种情况下，无赖）
同样在行：第42行，第57行，还有一个类'auth-textbox'附加到文本框，但我找不到其样式的定义位置。
继续，在第49行，对于文本字段，定义了“触发器”配置。在文档中它是http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.field.Text.html#cfg-triggers，它实际上没有解释任何东西，只是一堆代码。同样在Register.js文件的第一行，在第50行，它在触发器内部有一个'glyphed'配置。同样，我无法在文档中找到它的用途。当然这个想法很明确，它用于文本框触发器，但我需要确定我知道发生了什么。
我的下一个问题可能与之前的问题有关。如果您查看示例页面：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";
    }
}

ExtJS Admin Dashboard来自文档的示例

1 个答案: