/** * The Email field creates an HTML5 email input and is usually created inside a form. * Because it creates an HTML email input field, most browsers will show a specialized virtual * keyboard for email address input. Aside from that, the email field is just a normal text field. * Here's an example of how to use it in a form: * * ```javascript * @example({ framework: 'extjs' }) * Ext.create('Ext.form.Panel', { * fullscreen: true, * items: [ * { * xtype: 'fieldset', * title: 'Register', * items: [ * { * xtype: 'emailfield', * label: 'Email', * name: 'email' * }, * { * xtype: 'passwordfield', * label: 'Password', * name: 'password' * } * ] * } * ] * }); * * Or on its own, outside of a form: * * Ext.create('Ext.field.Email', { * label: 'Email address', * value: '[email protected]' * }); * * Because email field inherits from {@link Ext.field.Text textfield} it gains all of the * functionality that text fields provide, including getting and setting the value at runtime, * validations and various events that are fired as the user interacts with the component. * Check out the {@link Ext.field.Text} docs to see the additional functionality available. * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react'; * import { ExtContainer, ExtFormPanel, ExtEmailField } from '@sencha/ext-react'; * * export default class MyExample extends Component { * render() { * return ( * <ExtContainer layout="center"> * <ExtFormPanel shadow> * <ExtEmailField * width={250} * placeholder="[email protected]" * label="Email" * /> * </ExtFormPanel> * </ExtContainer> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'app-root-1', * styles: [``], * template: ` * <ExtContainer [layout]='"center"'> * <ExtFormPanel [shadow]> * <ExtEmailField * [width]='250' * [placeholder]='"[email protected]"' * [label]='"Email"' * > * </ExtEmailField> * </ExtFormPanel> * </ExtContainer> * ` * }) * export class AppComponent {} * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-container * layout="center" * > * <ext-formpanel * shadow="true" * > * <ext-emailfield * width="250" * placeholder="[email protected]" * label="Email" * > * </ext-emailfield> * </ext-formpanel> * </ext-container> * ``` * ```javascript * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 }) * import '@sencha/ext-web-components/dist/ext-container.component'; * import '@sencha/ext-web-components/dist/ext-formpanel.component'; * import '@sencha/ext-web-components/dist/ext-emailfield.component'; * * export default class EmailFieldComponent {} *``` * @since 6.5.1 */Ext.define('Ext.field.Email', { extend: 'Ext.field.Text', alternateClassName: 'Ext.form.Email', xtype: 'emailfield', config: { /** * @cfg autoCapitalize * @inheritdoc */ autoCapitalize: false }, /** * @cfg inputType * @inheritdoc */ inputType: 'email', /** * @property classCls * @inheritdoc */ classCls: Ext.baseCSSPrefix + 'emailfield'});