Question

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

我正在考虑创建一个电子邮件文本字段组件类和密码文本字段类，它将由TextField类进行扩展，并在这些类中使用vtype，name等属性自定义类，在我的登录表单/注册表单中，我使用这些自定义字段，这样我就可以避免代码重复。

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

此致

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

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

Answer 2

我也需要创建电子邮件和密码字段，但是由于某些原因，ExtJS 6.2.0 GPL仅在现代软件包中包含emailfield。我的应用显示了Ext.Loader和xtype: passwordfield的{{1}}错误“ 404未找到/未定义”。我在磁盘和存储库（https://cdnjs.com/libraries/extjs/6.2.0）中检入了库，但实际上没有找到它们。

所以我也可以选择-xtype: emailfield使用以下选项：

xtype: 'textfield'用于电子邮件（https://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.VTypes.html）
vtype: 'email'输入密码（https://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.Text.html#cfg-inputType）

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

2 个答案: