在 ExtJS6 中创建电子邮件字段组件答案

【问题标题】：Creating Email Field Component in ExtJS6在 ExtJS6 中创建电子邮件字段组件
【发布时间】：2016-04-13 06:31:50
【问题描述】：

我是一个初学者，我正在尝试使用 ExtJS6 创建登录页面。我可以做到这一点的最简单方法是创建一个 panel 包含诸如 2 text fields（用户名和密码）和 button 等项目，但由于电子邮件和密码文本字段将在注册时再次重复使用好吧，所以我想避免代码重复。因为在这两个地方我们将有相同的验证规则，我们将必须有相同的电子邮件和密码标题。

我正在考虑创建一个电子邮件文本字段组件类和密码文本字段类，它将由 TextField 类扩展，并在这些自定义类和我的登录表单/注册表单我使用这些自定义字段，因此我将能够避免代码重复。

我希望其他成员对此发表评论并告诉我这是否是正确的解决方案，如果是，那么我将如何实现这一目标。

问候

【问题讨论】：

标签： javascript extjs code-duplication extjs6 modular

【解决方案1】：

Extjs 6 已经提供了一个email 和一个password texfield。您可以使用它们的配置属性来应用更多验证。

您可以像这样创建自己的表单面板：

Ext.define('App.view.LoginPanel', {
    extend: 'Ext.form.Panel',
    fullscreen: true,
    items: [
        {
            xtype: 'fieldset',
            title: 'Register',
            items: [
                {
                    xtype: 'emailfield',
                    label: 'Email',
                    name: 'email'
                },
                {
                    xtype: 'passwordfield',
                    label: 'Password',
                    name: 'password'
                }
            ]
        }
    ]
});

并在任何你想要的地方使用它的多个实例。

【讨论】：

如果我们将登录作为一个组件，那么我们将减少可重用性圈并增加代码重复因为这个组件作为一个整体不会在项目中再次使用，但如果我们构建它像单元一样，将电子邮件文本框作为组件，并在其组件类中设置名称，验证属性并使用它，这样我们将增强可重用性，并且我们也可以避免重复。
定义一个自定义组件对我来说没有多大意义，例如：假设您扩展“密码字段”并设置其名称。现在，当您必须重用时，您将编写 {xtype:'custom'}。而不是 {xtype:'passwordfield', name:'password'}。使用 Ext 标准组件本身就是可重用性。但这取决于您和您的要求，您应该喜欢什么。

【解决方案2】：

我还需要创建电子邮件和密码字段，但出于某种原因，ExtJS 6.2.0 GPL 仅在现代包中包含电子邮件字段。我的应用程序显示Ext.Loader 错误“404 未找到/未定义”对于xtype: passwordfield 和xtype: emailfield。我检查了我磁盘上的库和存储库 (https://cdnjs.com/libraries/extjs/6.2.0)，但确实没有找到它们。

所以我也这样做了 - xtype: 'textfield' 有选项：

vtype: 'email' 用于电子邮件 (https://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.VTypes.html)
inputType: 'password' 密码 (https://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.Text.html#cfg-inputType)

【讨论】：