--- /dev/null
+/**
+ * @class Ext.form.field.Text
+ * @extends Ext.form.field.Base
+
+A basic text field. Can be used as a direct replacement for traditional text inputs,
+or as the base class for more sophisticated input controls (like {@link Ext.form.field.TextArea}
+and {@link Ext.form.field.ComboBox}). Has support for empty-field placeholder values (see {@link #emptyText}).
+
+#Validation#
+
+The Text field has a useful set of validations built in:
+
+- {@link #allowBlank} for making the field required
+- {@link #minLength} for requiring a minimum value length
+- {@link #maxLength} for setting a maximum value length (with {@link #enforceMaxLength} to add it
+ as the `maxlength` attribute on the input element)
+- {@link regex} to specify a custom regular expression for validation
+
+In addition, custom validations may be added:
+
+- {@link #vtype} specifies a virtual type implementation from {@link Ext.form.field.VTypes} which can contain
+ custom validation logic
+- {@link #validator} allows a custom arbitrary function to be called during validation
+
+The details around how and when each of these validation options get used are described in the
+documentation for {@link #getErrors}.
+
+By default, the field value is checked for validity immediately while the user is typing in the
+field. This can be controlled with the {@link #validateOnChange}, {@link #checkChangeEvents}, and
+{@link #checkChangeBugger} configurations. Also see the details on Form Validation in the
+{@link Ext.form.Panel} class documentation.
+
+#Masking and Character Stripping#
+
+Text fields can be configured with custom regular expressions to be applied to entered values before
+validation: see {@link #maskRe} and {@link #stripCharsRe} for details.
+{@img Ext.form.Text/Ext.form.Text.png Ext.form.Text component}
+#Example usage:#
+
+ Ext.create('Ext.form.Panel', {
+ title: 'Contact Info',
+ width: 300,
+ bodyPadding: 10,
+ renderTo: Ext.getBody(),
+ items: [{
+ xtype: 'textfield',
+ name: 'name',
+ fieldLabel: 'Name',
+ allowBlank: false // requires a non-empty value
+ }, {
+ xtype: 'textfield',
+ name: 'email',
+ fieldLabel: 'Email Address',
+ vtype: 'email' // requires value to be a valid email address format
+ }]
+ });
+
+ * @constructor Creates a new TextField
+ * @param {Object} config Configuration options
+ *
+ * @xtype textfield
+ * @markdown
+ * @docauthor Jason Johnston <jason@sencha.com>
+ */
+Ext.define('Ext.form.field.Text', {
+ extend:'Ext.form.field.Base',
+ alias: 'widget.textfield',
+ requires: ['Ext.form.field.VTypes', 'Ext.layout.component.field.Text'],
+ alternateClassName: ['Ext.form.TextField', 'Ext.form.Text'],
+
+ /**
+ * @cfg {String} vtypeText A custom error message to display in place of the default message provided
+ * for the <b><code>{@link #vtype}</code></b> currently set for this field (defaults to <tt>undefined</tt>).
+ * <b>Note</b>: only applies if <b><code>{@link #vtype}</code></b> is set, else ignored.
+ */
+
+ /**
+ * @cfg {RegExp} stripCharsRe A JavaScript RegExp object used to strip unwanted content from the value
+ * before validation (defaults to <tt>undefined</tt>).
+ */
+
+ /**
+ * @cfg {Number} size An initial value for the 'size' attribute on the text input element. This is only
+ * used if the field has no configured {@link #width} and is not given a width by its container's layout.
+ * Defaults to <tt>20</tt>.
+ */
+ size: 20,
+
+ /**
+ * @cfg {Boolean} grow <tt>true</tt> if this field should automatically grow and shrink to its content
+ * (defaults to <tt>false</tt>)
+ */
+
+ /**
+ * @cfg {Number} growMin The minimum width to allow when <code><b>{@link #grow}</b> = true</code> (defaults
+ * to <tt>30</tt>)
+ */
+ growMin : 30,
+
+ /**
+ * @cfg {Number} growMax The maximum width to allow when <code><b>{@link #grow}</b> = true</code> (defaults
+ * to <tt>800</tt>)
+ */
+ growMax : 800,
+
+ /**
+ * @cfg {String} growAppend
+ * A string that will be appended to the field's current value for the purposes of calculating the target
+ * field size. Only used when the {@link #grow} config is <tt>true</tt>. Defaults to a single capital "W"
+ * (the widest character in common fonts) to leave enough space for the next typed character and avoid the
+ * field value shifting before the width is adjusted.
+ */
+ growAppend: 'W',
+
+ /**
+ * @cfg {String} vtype A validation type name as defined in {@link Ext.form.field.VTypes} (defaults to <tt>undefined</tt>)
+ */
+
+ /**
+ * @cfg {RegExp} maskRe An input mask regular expression that will be used to filter keystrokes that do
+ * not match (defaults to <tt>undefined</tt>)
+ */
+
+ /**
+ * @cfg {Boolean} disableKeyFilter Specify <tt>true</tt> to disable input keystroke filtering (defaults
+ * to <tt>false</tt>)
+ */
+
+ /**
+ * @cfg {Boolean} allowBlank Specify <tt>false</tt> to validate that the value's length is > 0 (defaults to
+ * <tt>true</tt>)
+ */
+ allowBlank : true,
+
+ /**
+ * @cfg {Number} minLength Minimum input field length required (defaults to <tt>0</tt>)
+ */
+ minLength : 0,
+
+ /**
+ * @cfg {Number} maxLength Maximum input field length allowed by validation (defaults to Number.MAX_VALUE).
+ * This behavior is intended to provide instant feedback to the user by improving usability to allow pasting
+ * and editing or overtyping and back tracking. To restrict the maximum number of characters that can be
+ * entered into the field use the <tt><b>{@link Ext.form.field.Text#enforceMaxLength enforceMaxLength}</b></tt> option.
+ */
+ maxLength : Number.MAX_VALUE,
+
+ /**
+ * @cfg {Boolean} enforceMaxLength True to set the maxLength property on the underlying input field. Defaults to <tt>false</tt>
+ */
+
+ /**
+ * @cfg {String} minLengthText Error text to display if the <b><tt>{@link #minLength minimum length}</tt></b>
+ * validation fails (defaults to <tt>'The minimum length for this field is {minLength}'</tt>)
+ */
+ minLengthText : 'The minimum length for this field is {0}',
+
+ /**
+ * @cfg {String} maxLengthText Error text to display if the <b><tt>{@link #maxLength maximum length}</tt></b>
+ * validation fails (defaults to <tt>'The maximum length for this field is {maxLength}'</tt>)
+ */
+ maxLengthText : 'The maximum length for this field is {0}',
+
+ /**
+ * @cfg {Boolean} selectOnFocus <tt>true</tt> to automatically select any existing field text when the field
+ * receives input focus (defaults to <tt>false</tt>)
+ */
+
+ /**
+ * @cfg {String} blankText The error text to display if the <b><tt>{@link #allowBlank}</tt></b> validation
+ * fails (defaults to <tt>'This field is required'</tt>)
+ */
+ blankText : 'This field is required',
+
+ /**
+ * @cfg {Function} validator
+ * <p>A custom validation function to be called during field validation ({@link #getErrors})
+ * (defaults to <tt>undefined</tt>). If specified, this function will be called first, allowing the
+ * developer to override the default validation process.</p>
+ * <br><p>This function will be passed the following Parameters:</p>
+ * <div class="mdetail-params"><ul>
+ * <li><code>value</code>: <i>Mixed</i>
+ * <div class="sub-desc">The current field value</div></li>
+ * </ul></div>
+ * <br><p>This function is to Return:</p>
+ * <div class="mdetail-params"><ul>
+ * <li><code>true</code>: <i>Boolean</i>
+ * <div class="sub-desc"><code>true</code> if the value is valid</div></li>
+ * <li><code>msg</code>: <i>String</i>
+ * <div class="sub-desc">An error message if the value is invalid</div></li>
+ * </ul></div>
+ */
+
+ /**
+ * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation
+ * (defaults to <tt>undefined</tt>). If the test fails, the field will be marked invalid using
+ * <b><tt>{@link #regexText}</tt></b>.
+ */
+
+ /**
+ * @cfg {String} regexText The error text to display if <b><tt>{@link #regex}</tt></b> is used and the
+ * test fails during validation (defaults to <tt>''</tt>)
+ */
+ regexText : '',
+
+ /**
+ * @cfg {String} emptyText
+ * <p>The default text to place into an empty field (defaults to <tt>undefined</tt>).</p>
+ * <p>Note that normally this value will be submitted to the server if this field is enabled; to prevent this
+ * you can set the {@link Ext.form.action.Action#submitEmptyText submitEmptyText} option of
+ * {@link Ext.form.Basic#submit} to <tt>false</tt>.</p>
+ * <p>Also note that if you use <tt>{@link #inputType inputType}:'file'</tt>, {@link #emptyText} is not
+ * supported and should be avoided.</p>
+ */
+
+ /**
+ * @cfg {String} emptyCls The CSS class to apply to an empty field to style the <b><tt>{@link #emptyText}</tt></b>
+ * (defaults to <tt>'x-form-empty-field'</tt>). This class is automatically added and removed as needed
+ * depending on the current field value.
+ */
+ emptyCls : Ext.baseCSSPrefix + 'form-empty-field',
+
+ ariaRole: 'textbox',
+
+ /**
+ * @cfg {Boolean} enableKeyEvents <tt>true</tt> to enable the proxying of key events for the HTML input field (defaults to <tt>false</tt>)
+ */
+
+ componentLayout: 'textfield',
+
+ initComponent : function(){
+ this.callParent();
+ this.addEvents(
+ /**
+ * @event autosize
+ * Fires when the <tt><b>{@link #autoSize}</b></tt> function is triggered and the field is
+ * resized according to the {@link #grow}/{@link #growMin}/{@link #growMax} configs as a result.
+ * This event provides a hook for the developer to apply additional logic at runtime to resize the
+ * field if needed.
+ * @param {Ext.form.field.Text} this This text field
+ * @param {Number} width The new field width
+ */
+ 'autosize',
+
+ /**
+ * @event keydown
+ * Keydown input field event. This event only fires if <tt><b>{@link #enableKeyEvents}</b></tt>
+ * is set to true.
+ * @param {Ext.form.field.Text} this This text field
+ * @param {Ext.EventObject} e
+ */
+ 'keydown',
+ /**
+ * @event keyup
+ * Keyup input field event. This event only fires if <tt><b>{@link #enableKeyEvents}</b></tt>
+ * is set to true.
+ * @param {Ext.form.field.Text} this This text field
+ * @param {Ext.EventObject} e
+ */
+ 'keyup',
+ /**
+ * @event keypress
+ * Keypress input field event. This event only fires if <tt><b>{@link #enableKeyEvents}</b></tt>
+ * is set to true.
+ * @param {Ext.form.field.Text} this This text field
+ * @param {Ext.EventObject} e
+ */
+ 'keypress'
+ );
+ },
+
+ // private
+ initEvents : function(){
+ var me = this,
+ el = me.inputEl;
+
+ me.callParent();
+ if(me.selectOnFocus || me.emptyText){
+ me.mon(el, 'mousedown', me.onMouseDown, me);
+ }
+ if(me.maskRe || (me.vtype && me.disableKeyFilter !== true && (me.maskRe = Ext.form.field.VTypes[me.vtype+'Mask']))){
+ me.mon(el, 'keypress', me.filterKeys, me);
+ }
+
+ if (me.enableKeyEvents) {
+ me.mon(el, {
+ scope: me,
+ keyup: me.onKeyUp,
+ keydown: me.onKeyDown,
+ keypress: me.onKeyPress
+ });
+ }
+ },
+
+ /**
+ * @private override - treat undefined and null values as equal to an empty string value
+ */
+ isEqual: function(value1, value2) {
+ return String(Ext.value(value1, '')) === String(Ext.value(value2, ''));
+ },
+
+ /**
+ * @private
+ * If grow=true, invoke the autoSize method when the field's value is changed.
+ */
+ onChange: function() {
+ this.callParent();
+ this.autoSize();
+ },
+
+ afterRender: function(){
+ var me = this;
+ if (me.enforceMaxLength) {
+ me.inputEl.dom.maxLength = me.maxLength;
+ }
+ me.applyEmptyText();
+ me.autoSize();
+ me.callParent();
+ },
+
+ onMouseDown: function(e){
+ var me = this;
+ if(!me.hasFocus){
+ me.mon(me.inputEl, 'mouseup', Ext.emptyFn, me, { single: true, preventDefault: true });
+ }
+ },
+
+ /**
+ * Performs any necessary manipulation of a raw String value to prepare it for {@link #stringToValue conversion}
+ * and/or {@link #validate validation}. For text fields this applies the configured {@link #stripCharsRe} to the
+ * raw value.
+ * @param {String} value The unprocessed string value
+ * @return {String} The processed string value
+ */
+ processRawValue: function(value) {
+ var me = this,
+ stripRe = me.stripCharsRe,
+ newValue;
+
+ if (stripRe) {
+ newValue = value.replace(stripRe, '');
+ if (newValue !== value) {
+ me.setRawValue(newValue);
+ value = newValue;
+ }
+ }
+ return value;
+ },
+
+ //private
+ onDisable: function(){
+ this.callParent();
+ if (Ext.isIE) {
+ this.inputEl.dom.unselectable = 'on';
+ }
+ },
+
+ //private
+ onEnable: function(){
+ this.callParent();
+ if (Ext.isIE) {
+ this.inputEl.dom.unselectable = '';
+ }
+ },
+
+ onKeyDown: function(e) {
+ this.fireEvent('keydown', this, e);
+ },
+
+ onKeyUp: function(e) {
+ this.fireEvent('keyup', this, e);
+ },
+
+ onKeyPress: function(e) {
+ this.fireEvent('keypress', this, e);
+ },
+
+ /**
+ * Resets the current field value to the originally-loaded value and clears any validation messages.
+ * Also adds <tt><b>{@link #emptyText}</b></tt> and <tt><b>{@link #emptyCls}</b></tt> if the
+ * original value was blank.
+ */
+ reset : function(){
+ this.callParent();
+ this.applyEmptyText();
+ },
+
+ applyEmptyText : function(){
+ var me = this,
+ emptyText = me.emptyText,
+ isEmpty;
+
+ if (me.rendered && emptyText) {
+ isEmpty = me.getRawValue().length < 1 && !me.hasFocus;
+
+ if (Ext.supports.Placeholder) {
+ me.inputEl.dom.placeholder = emptyText;
+ } else if (isEmpty) {
+ me.setRawValue(emptyText);
+ }
+
+ //all browsers need this because of a styling issue with chrome + placeholders.
+ //the text isnt vertically aligned when empty (and using the placeholder)
+ if (isEmpty) {
+ me.inputEl.addCls(me.emptyCls);
+ }
+
+ me.autoSize();
+ }
+ },
+
+ // private
+ preFocus : function(){
+ var me = this,
+ inputEl = me.inputEl,
+ emptyText = me.emptyText,
+ isEmpty;
+
+ if (emptyText && !Ext.supports.Placeholder && inputEl.dom.value === emptyText) {
+ me.setRawValue('');
+ isEmpty = true;
+ inputEl.removeCls(me.emptyCls);
+ } else if (Ext.supports.Placeholder) {
+ me.inputEl.removeCls(me.emptyCls);
+ }
+ if (me.selectOnFocus || isEmpty) {
+ inputEl.dom.select();
+ }
+ },
+
+ onFocus: function() {
+ var me = this;
+ me.callParent(arguments);
+ if (me.emptyText) {
+ me.autoSize();
+ }
+ },
+
+ // private
+ postBlur : function(){
+ this.applyEmptyText();
+ },
+
+ // private
+ filterKeys : function(e){
+ if(e.ctrlKey){
+ return;
+ }
+ var key = e.getKey(),
+ charCode = String.fromCharCode(e.getCharCode());
+
+ if(Ext.isGecko && (e.isNavKeyPress() || key === e.BACKSPACE || (key === e.DELETE && e.button === -1))){
+ return;
+ }
+
+ if(!Ext.isGecko && e.isSpecialKey() && !charCode){
+ return;
+ }
+ if(!this.maskRe.test(charCode)){
+ e.stopEvent();
+ }
+ },
+
+ /**
+ * Returns the raw String value of the field, without performing any normalization, conversion, or validation.
+ * Gets the current value of the input element if the field has been rendered, ignoring the value if it is the
+ * {@link #emptyText}. To get a normalized and converted value see {@link #getValue}.
+ * @return {String} value The raw String value of the field
+ */
+ getRawValue: function() {
+ var me = this,
+ v = me.callParent();
+ if (v === me.emptyText) {
+ v = '';
+ }
+ return v;
+ },
+
+ /**
+ * Sets a data value into the field and runs the change detection and validation. Also applies any configured
+ * {@link #emptyText} for text fields. To set the value directly without these inspections see {@link #setRawValue}.
+ * @param {Mixed} value The value to set
+ * @return {Ext.form.field.Text} this
+ */
+ setValue: function(value) {
+ var me = this,
+ inputEl = me.inputEl;
+
+ if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
+ inputEl.removeCls(me.emptyCls);
+ }
+
+ me.callParent(arguments);
+
+ me.applyEmptyText();
+ return me;
+ },
+
+ /**
+Validates a value according to the field's validation rules and returns an array of errors
+for any failing validations. Validation rules are processed in the following order:
+
+1. **Field specific validator**
+
+ A validator offers a way to customize and reuse a validation specification.
+ If a field is configured with a `{@link #validator}`
+ function, it will be passed the current field value. The `{@link #validator}`
+ function is expected to return either:
+
+ - Boolean `true` if the value is valid (validation continues).
+ - a String to represent the invalid message if invalid (validation halts).
+
+2. **Basic Validation**
+
+ If the `{@link #validator}` has not halted validation,
+ basic validation proceeds as follows:
+
+ - `{@link #allowBlank}` : (Invalid message = `{@link #emptyText}`)
+
+ Depending on the configuration of <code>{@link #allowBlank}</code>, a
+ blank field will cause validation to halt at this step and return
+ Boolean true or false accordingly.
+
+ - `{@link #minLength}` : (Invalid message = `{@link #minLengthText}`)
+
+ If the passed value does not satisfy the `{@link #minLength}`
+ specified, validation halts.
+
+ - `{@link #maxLength}` : (Invalid message = `{@link #maxLengthText}`)
+
+ If the passed value does not satisfy the `{@link #maxLength}`
+ specified, validation halts.
+
+3. **Preconfigured Validation Types (VTypes)**
+
+ If none of the prior validation steps halts validation, a field
+ configured with a `{@link #vtype}` will utilize the
+ corresponding {@link Ext.form.field.VTypes VTypes} validation function.
+ If invalid, either the field's `{@link #vtypeText}` or
+ the VTypes vtype Text property will be used for the invalid message.
+ Keystrokes on the field will be filtered according to the VTypes
+ vtype Mask property.
+
+4. **Field specific regex test**
+
+ If none of the prior validation steps halts validation, a field's
+ configured <code>{@link #regex}</code> test will be processed.
+ The invalid message for this test is configured with `{@link #regexText}`
+
+ * @param {Mixed} value The value to validate. The processed raw value will be used if nothing is passed
+ * @return {Array} Array of any validation errors
+ * @markdown
+ */
+ getErrors: function(value) {
+ var me = this,
+ errors = me.callParent(arguments),
+ validator = me.validator,
+ emptyText = me.emptyText,
+ allowBlank = me.allowBlank,
+ vtype = me.vtype,
+ vtypes = Ext.form.field.VTypes,
+ regex = me.regex,
+ format = Ext.String.format,
+ msg;
+
+ value = value || me.processRawValue(me.getRawValue());
+
+ if (Ext.isFunction(validator)) {
+ msg = validator.call(me, value);
+ if (msg !== true) {
+ errors.push(msg);
+ }
+ }
+
+ if (value.length < 1 || value === emptyText) {
+ if (!allowBlank) {
+ errors.push(me.blankText);
+ }
+ //if value is blank, there cannot be any additional errors
+ return errors;
+ }
+
+ if (value.length < me.minLength) {
+ errors.push(format(me.minLengthText, me.minLength));
+ }
+
+ if (value.length > me.maxLength) {
+ errors.push(format(me.maxLengthText, me.maxLength));
+ }
+
+ if (vtype) {
+ if(!vtypes[vtype](value, me)){
+ errors.push(me.vtypeText || vtypes[vtype +'Text']);
+ }
+ }
+
+ if (regex && !regex.test(value)) {
+ errors.push(me.regexText || me.invalidText);
+ }
+
+ return errors;
+ },
+
+ /**
+ * Selects text in this field
+ * @param {Number} start (optional) The index where the selection should start (defaults to 0)
+ * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
+ */
+ selectText : function(start, end){
+ var me = this,
+ v = me.getRawValue(),
+ doFocus = true,
+ el = me.inputEl.dom,
+ undef,
+ range;
+
+ if (v.length > 0) {
+ start = start === undef ? 0 : start;
+ end = end === undef ? v.length : end;
+ if (el.setSelectionRange) {
+ el.setSelectionRange(start, end);
+ }
+ else if(el.createTextRange) {
+ range = el.createTextRange();
+ range.moveStart('character', start);
+ range.moveEnd('character', end - v.length);
+ range.select();
+ }
+ doFocus = Ext.isGecko || Ext.isOpera;
+ }
+ if (doFocus) {
+ me.focus();
+ }
+ },
+
+ /**
+ * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
+ * This only takes effect if <tt>{@link #grow} = true</tt>, and fires the {@link #autosize} event if the
+ * width changes.
+ */
+ autoSize: function() {
+ var me = this,
+ width;
+ if (me.grow && me.rendered) {
+ me.doComponentLayout();
+ width = me.inputEl.getWidth();
+ if (width !== me.lastInputWidth) {
+ me.fireEvent('autosize', width);
+ me.lastInputWidth = width;
+ }
+ }
+ },
+
+ initAria: function() {
+ this.callParent();
+ this.getActionEl().dom.setAttribute('aria-required', this.allowBlank === false);
+ },
+
+ /**
+ * @protected override
+ * To get the natural width of the inputEl, we do a simple calculation based on the
+ * 'size' config. We use hard-coded numbers to approximate what browsers do natively,
+ * to avoid having to read any styles which would hurt performance.
+ */
+ getBodyNaturalWidth: function() {
+ return Math.round(this.size * 6.5) + 20;
+ }
+
+});
git.ithinksw.org / extjs.git / blobdiff