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

Question

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

我正在考虑创建一个电子邮件文本字段组件 class 和密码文本字段 class，它们将由 TextField class 扩展并使用诸如此类的属性作为 vtype,name 在这些自定义定义 classes 中，在我的登录 form/Signup 表单中，我使用这些自定义字段，因此我将能够避免代码重复。

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

此致

Answer 1

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

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

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'
                }
            ]
        }
    ]
});

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

Answer 2

我也需要创建电子邮件和密码字段，但出于某种原因，ExtJS 6.2.0 GPL 仅在现代包中包含电子邮件字段。我的应用为 xtype: passwordfield 和 xtype: emailfield 显示 Ext.Loader 错误“404 未找到/未定义”。我检查了磁盘上的库和存储库 (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)

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

Creating Email Field Component in ExtJS6

javascript

extjs

code-duplication

modular

extjs6