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

我是一名初学者，正在尝试使用ExtJS6创建登录页面。我能做的最简单的方法是创建一个

面板

，其中包含2个

文本字段

（用户名和密码）和

按钮

，但由于电子邮件和密码文本字段也将在注册中重复使用，因此我希望避免代码重复。在这两个地方，我们将有相同的验证规则，我们将有相同的电子邮件和密码标题

我正在考虑创建一个电子邮件文本字段组件类和密码文本字段类，该类将通过

TextField

类进行扩展，并使用

vtype

等属性，

name

在这些自定义定义类和我的登录表单/注册表单中，我使用这些自定义字段，以避免代码重复

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

---

关于

extjs6已经提供了一个和一个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'
                }
            ]
        }
    ]
});

---

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

extjs6已经提供了一个和一个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'
                }
            ]
        }
    ]
});

---

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

我还需要创建电子邮件和密码字段，但出于某些原因，ExtJS 6.2.0 GPL仅在现代软件包中包含电子邮件字段。我的应用程序在

xtype:passwordfield

和

xtype:emailfield

中显示

Ext.Loader

错误“404未找到/未定义”。我在磁盘和存储库（）中签入了库，但确实没有找到它们

因此，我也可以选择这样做-

xtype:'textfield'

选项：

• vtype:“电子邮件”

  用于电子邮件（）

• inputType:“密码”

  用于密码（）

---

我还需要创建电子邮件和密码字段，但出于某些原因，ExtJS 6.2.0 GPL仅在现代软件包中包含电子邮件字段。我的应用程序在

xtype:passwordfield

和

xtype:emailfield

中显示

Ext.Loader

错误“404未找到/未定义”。我在磁盘和存储库（）中签入了库，但确实没有找到它们

因此，我也可以选择这样做-

xtype:'textfield'

选项：

• vtype:“电子邮件”

  用于电子邮件（）

• inputType:“密码”

  用于密码（）

---

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