/** * @class Ext.field.Field * @alternateClassName Ext.form.Field * @extend Ext.Component * @xtype field * * Field is the base class for all form fields. It provides a lot of shared functionality to all * field subclasses (for example labels, simple validation, {@link #clearIcon clearing} and tab index management), but * is rarely used directly. Instead, it is much more common to use one of the field subclasses: * * xtype Class * --------------------------------------- * textfield {@link Ext.field.Text} * numberfield {@link Ext.field.Number} * textareafield {@link Ext.field.TextArea} * hiddenfield {@link Ext.field.Hidden} * radiofield {@link Ext.field.Radio} * filefield {@link Ext.field.File} * checkboxfield {@link Ext.field.Checkbox} * selectfield {@link Ext.field.Select} * togglefield {@link Ext.field.Toggle} * fieldset {@link Ext.form.FieldSet} * * Fields are normally used within the context of a form and/or fieldset. See the {@link Ext.form.Panel FormPanel} * and {@link Ext.form.FieldSet FieldSet} docs for examples on how to put those together, or the list of links above * for usage of individual field types. If you wish to create your own Field subclasses you can extend this class, * though it is sometimes more useful to extend {@link Ext.field.Text} as this provides additional text entry * functionality. */ /** * @property {Boolean} [isField=true] * Set to `true` on all Ext.field.Field subclasses. This is used by * {@link Ext.form.Panel#getValues} to determine which components inside a form are fields. */ /** * @event click * Fires whenever the input is clicked. * @param {Ext.event.Event} e The event object. */ /** * @event keyup * Fires whenever keyup is detected. * @param {Ext.event.Event} e The event object. */ /** * @event paste * Fires whenever paste is detected. * @param {Ext.event.Event} e The event object. */ /** * @event mousedown * Fires whenever the input has a mousedown occur. * @param {Ext.event.Event} e The event object. */ /** * @cfg {String} [name=null] * * The field's HTML name attribute. * * __Note:__ this property must be set if this field is to be automatically included with. * {@link Ext.form.Panel#method-submit form submit()}. * @accessor */ /** * @cfg {String} [label=null] * The label of this field * @accessor */ /** * @cfg {'top'/'left'/'bottom'/'right'} [labelAlign='left'] * * The position to render the label relative to the field input. * @accessor */ /** * @cfg {'top'/'right'/'bottom'/'left'} [labelTextAlign='left'] * * Text alignment of this field's label * @accessor */ /** * @cfg {'start'/'center'/'end'/'stretch'} [bodyAlign='start'] * * The horizontal alignment of this field's {@link #component} within the body * of the field * @accessor */ /** * @cfg {Number/String} [labelMinWidth=null] * Min-width of this field's label. * @accessor */ /** * @cfg {String} [requiredMessage='This field is required'] * The error message to display when {@link #required} is `true` and the field's * value is "empty" (`null`, `undefined`, or empty string). * @accessor */ /** * @cfg {Mixed} [validators=null] * A validator or array of validators to be applied to the field. * * When the field is validated, each validator is applied and if any one of them * determines the field is invalid, the field will be marked as invalid. If you * examine the field's validators, you will get an array of Ext.data.Validators. * * Validation currently is synchronous. If you need to validate a field with interaction * with a server, you would do this when the form is submitted. * * A validator may be: * * * A regexp - if the field fails to match the regexp, it is invalid. * * A function - the function will be called to validate the field; it should return false if invalid.` * * An object - an object with a member fn that is a function to be called to validate the field. * * An instantiated Validator {@link Ext.data.validator} * @accessor */ /** * @cfg {Number/String} [labelWidth=null] * The width to make this field's label. * @accessor */ /** * @cfg {Boolean} [labelWrap=false] * * `true` to allow the label to wrap. If set to `false`, the label will be truncated with * an ellipsis. * @accessor */ /** * @cfg {Boolean} [required=false] * * `true` to make this field required. * * __Note:__ this only causes a visual indication. * * Doesn't prevent user from submitting the form. * @accessor */ /** * @cfg {Mixed} [value=null] * A value to initialize this field with. * @accessor */ /** * @cfg {String} [validationMessage='Is in the wrong format'] * For HTML5 validation, regex, etc., this is the error message returned if field is invalid. * @accessor */ /** * @cfg {Boolean} [validateDisabled=false] * * `true` to validate the field, even if it is disabled. * @accessor */ /** * @cfg {Boolean} [disabled=false] * * `true` to disable the field. * * Be aware that conformant with the [HTML specification](http://www.w3.org/TR/html401/interact/forms.html), * disabled Fields will not be {@link Ext.form.Panel#method-submit submitted}. * @accessor */ /** * @cfg {Boolean} fullscreen * @hide */ /** * @cfg {Boolean} [autoFitErrors=true] * Whether to adjust the component's body width to make room for {@link #msgTarget error messages}. * @accessor */ /** * @cfg {Boolean} [inline=false] * `true` to cause this field to layout with inline element behavior. * An inline field's width is determined by the total width of its label and body * elements instead of automatically expanding to fill the width of its container. * @accessor */ /** * @cfg {String/String[]} [error=null] * The error (or errors) to display for this field. This config is typically set * by the field's {@link #cfg!validators validators} but can be set directly if * an error needs to be associated with a field manually. * * Errors will be HTML encoded as necessary and {@link #cfg!errorTpl formatted} * before becoming the current {@link #cfg!errorMessage}. * @since 6.5.0 * @accessor */ /** * @cfg {String} [errorMessage=null] * The field's error message to display as {@link #cfg!errorTarget specified}. * This message must already be properly formatted and encoded as appropriate * for the `errorTarget`. * @since 6.5.0 * @accessor */ /** * @cfg {String} [errorTarget='qtip'] * The location where the error message text should display. * * The following are values that have predefined meaning: * * - `qtip` Display a {@link Ext.tip.Manager quick tip} containing the message * when the user hovers (or taps) the field. For this option to work, quick tips * must be enabled by calling {@link Ext.tip.Manager#init}. * - `side` Add an error icon to the right of the field, displaying the message * in a popup on hover or tap. * - `title` Display the message in a default browser `title` attribute. * - `under` Add a `div` beneath the field containing the error message. * * **Note** `under` is not a valid option when using {@link Ext.layout.Form} on * this field's parent container * @since 6.5.0 * @accessor */ /** * @cfg {String/String[]/Ext.XTemplate} [errorTpl=null] * The template used to format the {@link #cfg!error error} set for this field. * By default, the {@link #cfg!errorTarget errorTarget} is used to determine * whether the error(s) are formatted as an HTML list or as plain text. * @since 6.5.0 * @accessor */ /** * @cfg {Object} [errorTip=null] * The default config that will be used to display errors in the tooltip. * @since 6.5.0 * @accessor */ /** * @cfg {String} [labelCls=null] * Optional CSS class to add to the Label element. * @accessor */ /** * @property {Ext.dom.Element} labelElement * The label Element associated with this Field. */ /** * @property {"none"/"auto"/"all"} [validateOnInit='auto'] * Determines how initial values will handle validation * - none: Will not validate any initial values * - auto: Will only validate non-empty initial values * - all: Will validate all initial values */ /** * @method getValue * Returns the field data value. * @return {Mixed} value The field value. */ /** * @method reset * Resets the current field value back to the original value on this field when it was created. * * // Update the value * field.setValue('new value'); * * // Now you can reset it back to the `first value` * field.reset(); * * @return {Ext.field.Field} this */ /** * @method resetOriginalValue * Resets the field's {@link #originalValue} property so it matches the current * {@link #getValue value}. This is called by {@link Ext.form.Panel}. * {@link Ext.form.Panel#setValues setValues} if the * form's {@link Ext.form.Panel#trackResetOnLoad trackResetOnLoad} property * is set to true. */ /** * @method isDirty * Returns `true` if the value of this Field has been changed from its {@link #originalValue}. * Will return `false` if the field is disabled or has not been rendered yet. * * @return {Boolean} `true` if this field has been changed from its original value (and * is not disabled), `false` otherwise. */ /** * @method setActiveError * Store the activeError message string, fire the errorchange event accordingly, and * update the UI. If the error to be set is empty string, any validation UI is removed, * otherwise the proper validation UI is displayed, based upon `msgTarget`. */ /** * @method getActiveError * Gets the active error message for this component, if any. This does not trigger * validation on its own, it merely returns any message that the component may already hold. * @return {String} The active error message on the component; if there is no error, an * empty string is returned. */ /** * @method hasActiveError * Tells whether the field currently has an active error message. This does not trigger * validation on its own, it merely looks for any message that the component may * already hold. * @return {Boolean} */ /** * @method getActiveErrors * Gets the array of active errors for this component, if any. * * @return {Array} The active error message(s) on the component. */ /** * @method setActiveErrors * Set the active error message to an Array of error messages. The messages are formatted into a single message * string using the {@link #activeErrorsTpl}. Also see {@link #setActiveError} which allows setting the entire error * contents with a single string. You probably want to call {@link Ext.form.field.Base#markInvalid markInvalid} instead. * @param {String[]} errors The error messages */ /** * @method markInvalid * Mark field as invalid. */ /** * @method clearInvalid * Mark field as valid. */ /** * @method isValid * Returns true if field is valid. */ /** * @method isEqual * Returns whether two field {@link #getValue values} are logically equal. Field implementations may override this * to provide custom comparison logic appropriate for the particular field's data type. * @param {Object} value1 The first value to compare * @param {Object} value2 The second value to compare * @return {Boolean} True if the values are equal, false if inequal. */ /** * @method validate * Validate the field and return it's validity state. * To get the existing validity state without re-validating current value, * use {@link isValid}. */