Создание компонента поля электронной почты в ExtJS6

Я новичок и пытаюсь создать страницу входа с помощью ExtJS6. Самый простой способ сделать это — создать panel, содержащий такие элементы, как 2 text fields (имя пользователя и пароль) и button, но, поскольку текстовое поле электронной почты и пароля будет повторно использоваться при регистрации, поэтому я хочу избежать дублирование кода. Поскольку в обоих местах у нас будут одинаковые правила проверки, у нас должны быть одинаковые заголовки для электронной почты и пароля.

Я думаю о создании класса компонента текстового поля электронной почты и класса текстового поля пароля, который будет расширен классом TextField и использовать такие свойства, как vtype, name, в этих настраиваемых классах определения, а в моей форме входа/форме регистрации я использую эти пользовательские поля, поэтому я смогу избежать дублирования кода.

Я хотел бы, чтобы другие участники прокомментировали это и сказали мне, является ли это правильным решением или нет, и если да, то как я собираюсь этого добиться.

С Уважением


javascript code-duplication extjs modular extjs6
person mubeen    schedule 13.04.2016    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Extjs 6 уже предоставляет электронную почту и пароль тексфилд. Вы можете использовать их свойства конфигурации, чтобы применить дополнительные проверки.

Вы можете создать свою собственную панель формы следующим образом:

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

и используйте несколько его экземпляров, где бы вы ни находились.

person Abdul Rehman Yawar Khan    schedule 13.04.2016
comment
Если мы сделаем вход в систему как компонент, то мы уменьшим круг повторного использования и увеличим дублирование кода, поскольку этот компонент в целом больше не будет использоваться в проекте, но если мы создадим его как единицы и сделаем текстовое поле электронной почты как компонент , и установите имя, свойства проверки в своем классе компонентов и используйте их, тогда мы улучшим возможность повторного использования, а также сможем избежать дублирования. - person mubeen; 13.04.2016
comment
Для меня не имеет особого смысла определять пользовательский компонент, например: Допустим, вы расширяете «поле пароля» и устанавливаете его имя. Теперь при повторном использовании вы будете писать {xtype:'custom'}. Вместо {xtype:'paswordfield', name:'password'}. Использование стандартного компонента Ext само по себе является возможностью повторного использования. Но это зависит от вас и ваших требований, что вы должны предпочесть. - person Abdul Rehman Yawar Khan; 13.04.2016

arrow_upward
0
arrow_downward

Мне также нужно было создать поле электронной почты и пароля, но по какой-то причине ExtJS 6.2.0 GPL содержит поле электронной почты только в современных пакетах. Мое приложение показало Ext.Loader ошибки "404 не найдено/не определено" для xtype: passwordfield и xtype: emailfield. Я проверил библиотеку на своем диске и в репозитории (https://cdnjs.com/libraries/extjs/6.2.0) и толком их не нашел.

Поэтому я сделал это альтернативно - xtype: 'textfield' с опциями:

person Eluny    schedule 16.04.2019