X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/pkgs/pkg-forms-debug.js diff --git a/pkgs/pkg-forms-debug.js b/pkgs/pkg-forms-debug.js deleted file mode 100644 index 910f07ef..00000000 --- a/pkgs/pkg-forms-debug.js +++ /dev/null @@ -1,8252 +0,0 @@ -/*! - * Ext JS Library 3.1.1 - * Copyright(c) 2006-2010 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license - */ -/** - * @class Ext.form.Field - * @extends Ext.BoxComponent - * Base class for form fields that provides default event handling, sizing, value handling and other functionality. - * @constructor - * Creates a new Field - * @param {Object} config Configuration options - * @xtype field - */ -Ext.form.Field = Ext.extend(Ext.BoxComponent, { - /** - *

The label Element associated with this Field. Only available after this Field has been rendered by a - * {@link form Ext.layout.FormLayout} layout manager.

- * @type Ext.Element - * @property label - */ - /** - * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password, file (defaults - * to 'text'). The types 'file' and 'password' must be used to render those field types currently -- there are - * no separate Ext components for those. Note that if you use inputType:'file', {@link #emptyText} - * is not supported and should be avoided. - */ - /** - * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered, - * not those which are built via applyTo (defaults to undefined). - */ - /** - * @cfg {Mixed} value A value to initialize this field with (defaults to undefined). - */ - /** - * @cfg {String} name The field's HTML name attribute (defaults to ''). - * Note: this property must be set if this field is to be automatically included with - * {@link Ext.form.BasicForm#submit form submit()}. - */ - /** - * @cfg {String} cls A custom CSS class to apply to the field's underlying element (defaults to ''). - */ - - /** - * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to 'x-form-invalid') - */ - invalidClass : 'x-form-invalid', - /** - * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided - * (defaults to 'The value in this field is invalid') - */ - invalidText : 'The value in this field is invalid', - /** - * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to 'x-form-focus') - */ - focusClass : 'x-form-focus', - /** - * @cfg {Boolean} preventMark - * true to disable {@link #markInvalid marking the field invalid}. - * Defaults to false. - */ - /** - * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable - automatic validation (defaults to 'keyup'). - */ - validationEvent : 'keyup', - /** - * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true). - */ - validateOnBlur : true, - /** - * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation - * is initiated (defaults to 250) - */ - validationDelay : 250, - /** - * @cfg {String/Object} autoCreate

A {@link Ext.DomHelper DomHelper} element spec, or true for a default - * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component. - * See {@link Ext.Component#autoEl autoEl} for details. Defaults to:

- *
{tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
- */ - defaultAutoCreate : {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}, - /** - * @cfg {String} fieldClass The default CSS class for the field (defaults to 'x-form-field') - */ - fieldClass : 'x-form-field', - /** - * @cfg {String} msgTarget

The location where the message text set through {@link #markInvalid} should display. - * Must be one of the following values:

- *
- */ - msgTarget : 'qtip', - /** - * @cfg {String} msgFx Experimental The effect used when displaying a validation message under the field - * (defaults to 'normal'). - */ - msgFx : 'normal', - /** - * @cfg {Boolean} readOnly true to mark the field as readOnly in HTML - * (defaults to false). - *

Note: this only sets the element's readOnly DOM attribute. - * Setting readOnly=true, for example, will not disable triggering a - * ComboBox or DateField; it gives you the option of forcing the user to choose - * via the trigger without typing in the text box. To hide the trigger use - * {@link Ext.form.TriggerField#hideTrigger hideTrigger}.

- */ - readOnly : false, - /** - * @cfg {Boolean} disabled True to disable the field (defaults to false). - *

Be aware that conformant with the HTML specification, - * disabled Fields will not be {@link Ext.form.BasicForm#submit submitted}.

- */ - disabled : false, - /** - * @cfg {Boolean} submitValue False to clear the name attribute on the field so that it is not submitted during a form post. - * Defaults to true. - */ - submitValue: true, - - // private - isFormField : true, - - // private - msgDisplay: '', - - // private - hasFocus : false, - - // private - initComponent : function(){ - Ext.form.Field.superclass.initComponent.call(this); - this.addEvents( - /** - * @event focus - * Fires when this field receives input focus. - * @param {Ext.form.Field} this - */ - 'focus', - /** - * @event blur - * Fires when this field loses input focus. - * @param {Ext.form.Field} this - */ - 'blur', - /** - * @event specialkey - * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. - * To handle other keys see {@link Ext.Panel#keys} or {@link Ext.KeyMap}. - * You can check {@link Ext.EventObject#getKey} to determine which key was pressed. - * For example:

-var form = new Ext.form.FormPanel({
-    ...
-    items: [{
-            fieldLabel: 'Field 1',
-            name: 'field1',
-            allowBlank: false
-        },{
-            fieldLabel: 'Field 2',
-            name: 'field2',
-            listeners: {
-                specialkey: function(field, e){
-                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
-                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
-                    if (e.{@link Ext.EventObject#getKey getKey()} == e.ENTER) {
-                        var form = field.ownerCt.getForm();
-                        form.submit();
-                    }
-                }
-            }
-        }
-    ],
-    ...
-});
-             * 
- * @param {Ext.form.Field} this - * @param {Ext.EventObject} e The event object - */ - 'specialkey', - /** - * @event change - * Fires just before the field blurs if the field value has changed. - * @param {Ext.form.Field} this - * @param {Mixed} newValue The new value - * @param {Mixed} oldValue The original value - */ - 'change', - /** - * @event invalid - * Fires after the field has been marked as invalid. - * @param {Ext.form.Field} this - * @param {String} msg The validation message - */ - 'invalid', - /** - * @event valid - * Fires after the field has been validated with no errors. - * @param {Ext.form.Field} this - */ - 'valid' - ); - }, - - /** - * Returns the {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName} - * attribute of the field if available. - * @return {String} name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName} - */ - getName : function(){ - return this.rendered && this.el.dom.name ? this.el.dom.name : this.name || this.id || ''; - }, - - // private - onRender : function(ct, position){ - if(!this.el){ - var cfg = this.getAutoCreate(); - - if(!cfg.name){ - cfg.name = this.name || this.id; - } - if(this.inputType){ - cfg.type = this.inputType; - } - this.autoEl = cfg; - } - Ext.form.Field.superclass.onRender.call(this, ct, position); - if(this.submitValue === false){ - this.el.dom.removeAttribute('name'); - } - var type = this.el.dom.type; - if(type){ - if(type == 'password'){ - type = 'text'; - } - this.el.addClass('x-form-'+type); - } - if(this.readOnly){ - this.setReadOnly(true); - } - if(this.tabIndex !== undefined){ - this.el.dom.setAttribute('tabIndex', this.tabIndex); - } - - this.el.addClass([this.fieldClass, this.cls]); - }, - - // private - getItemCt : function(){ - return this.itemCt; - }, - - // private - initValue : function(){ - if(this.value !== undefined){ - this.setValue(this.value); - }else if(!Ext.isEmpty(this.el.dom.value) && this.el.dom.value != this.emptyText){ - this.setValue(this.el.dom.value); - } - /** - * The original value of the field as configured in the {@link #value} configuration, or - * as loaded by the last form load operation if the form's {@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad} - * setting is true. - * @type mixed - * @property originalValue - */ - this.originalValue = this.getValue(); - }, - - /** - *

Returns true if the value of this Field has been changed from its original value. - * Will return false if the field is disabled or has not been rendered yet.

- *

Note that if the owning {@link Ext.form.BasicForm form} was configured with - * {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad} - * then the original value is updated when the values are loaded by - * {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#setValues setValues}.

- * @return {Boolean} True if this field has been changed from its original value (and - * is not disabled), false otherwise. - */ - isDirty : function() { - if(this.disabled || !this.rendered) { - return false; - } - return String(this.getValue()) !== String(this.originalValue); - }, - - /** - * Sets the read only state of this field. - * @param {Boolean} readOnly Whether the field should be read only. - */ - setReadOnly : function(readOnly){ - if(this.rendered){ - this.el.dom.readOnly = readOnly; - } - this.readOnly = readOnly; - }, - - // private - afterRender : function(){ - Ext.form.Field.superclass.afterRender.call(this); - this.initEvents(); - this.initValue(); - }, - - // private - fireKey : function(e){ - if(e.isSpecialKey()){ - this.fireEvent('specialkey', this, e); - } - }, - - /** - * Resets the current field value to the originally loaded value and clears any validation messages. - * See {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad} - */ - reset : function(){ - this.setValue(this.originalValue); - this.clearInvalid(); - }, - - // private - initEvents : function(){ - this.mon(this.el, Ext.EventManager.useKeydown ? 'keydown' : 'keypress', this.fireKey, this); - this.mon(this.el, 'focus', this.onFocus, this); - - // standardise buffer across all browsers + OS-es for consistent event order. - // (the 10ms buffer for Editors fixes a weird FF/Win editor issue when changing OS window focus) - this.mon(this.el, 'blur', this.onBlur, this, this.inEditor ? {buffer:10} : null); - }, - - // private - preFocus: Ext.emptyFn, - - // private - onFocus : function(){ - this.preFocus(); - if(this.focusClass){ - this.el.addClass(this.focusClass); - } - if(!this.hasFocus){ - this.hasFocus = true; - /** - *

The value that the Field had at the time it was last focused. This is the value that is passed - * to the {@link #change} event which is fired if the value has been changed when the Field is blurred.

- *

This will be undefined until the Field has been visited. Compare {@link #originalValue}.

- * @type mixed - * @property startValue - */ - this.startValue = this.getValue(); - this.fireEvent('focus', this); - } - }, - - // private - beforeBlur : Ext.emptyFn, - - // private - onBlur : function(){ - this.beforeBlur(); - if(this.focusClass){ - this.el.removeClass(this.focusClass); - } - this.hasFocus = false; - if(this.validationEvent !== false && (this.validateOnBlur || this.validationEvent == 'blur')){ - this.validate(); - } - var v = this.getValue(); - if(String(v) !== String(this.startValue)){ - this.fireEvent('change', this, v, this.startValue); - } - this.fireEvent('blur', this); - this.postBlur(); - }, - - // private - postBlur : Ext.emptyFn, - - /** - * Returns whether or not the field value is currently valid by - * {@link #validateValue validating} the {@link #processValue processed value} - * of the field. Note: {@link #disabled} fields are ignored. - * @param {Boolean} preventMark True to disable marking the field invalid - * @return {Boolean} True if the value is valid, else false - */ - isValid : function(preventMark){ - if(this.disabled){ - return true; - } - var restore = this.preventMark; - this.preventMark = preventMark === true; - var v = this.validateValue(this.processValue(this.getRawValue())); - this.preventMark = restore; - return v; - }, - - /** - * Validates the field value - * @return {Boolean} True if the value is valid, else false - */ - validate : function(){ - if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){ - this.clearInvalid(); - return true; - } - return false; - }, - - /** - * This method should only be overridden if necessary to prepare raw values - * for validation (see {@link #validate} and {@link #isValid}). This method - * is expected to return the processed value for the field which will - * be used for validation (see validateValue method). - * @param {Mixed} value - */ - processValue : function(value){ - return value; - }, - - /** - * @private - * Subclasses should provide the validation implementation by overriding this - * @param {Mixed} value - */ - validateValue : function(value){ - return true; - }, - - /** - * Gets the active error message for this field. - * @return {String} Returns the active error message on the field, if there is no error, an empty string is returned. - */ - getActiveError : function(){ - return this.activeError || ''; - }, - - /** - *

Display an error message associated with this field, using {@link #msgTarget} to determine how to - * display the message and applying {@link #invalidClass} to the field's UI element.

- *

Note: this method does not cause the Field's {@link #validate} method to return false - * if the value does pass validation. So simply marking a Field as invalid will not prevent - * submission of forms submitted with the {@link Ext.form.Action.Submit#clientValidation} option set.

- * {@link #isValid invalid}. - * @param {String} msg (optional) The validation message (defaults to {@link #invalidText}) - */ - markInvalid : function(msg){ - if(!this.rendered || this.preventMark){ // not rendered - return; - } - msg = msg || this.invalidText; - - var mt = this.getMessageHandler(); - if(mt){ - mt.mark(this, msg); - }else if(this.msgTarget){ - this.el.addClass(this.invalidClass); - var t = Ext.getDom(this.msgTarget); - if(t){ - t.innerHTML = msg; - t.style.display = this.msgDisplay; - } - } - this.activeError = msg; - this.fireEvent('invalid', this, msg); - }, - - /** - * Clear any invalid styles/messages for this field - */ - clearInvalid : function(){ - if(!this.rendered || this.preventMark){ // not rendered - return; - } - this.el.removeClass(this.invalidClass); - var mt = this.getMessageHandler(); - if(mt){ - mt.clear(this); - }else if(this.msgTarget){ - this.el.removeClass(this.invalidClass); - var t = Ext.getDom(this.msgTarget); - if(t){ - t.innerHTML = ''; - t.style.display = 'none'; - } - } - delete this.activeError; - this.fireEvent('valid', this); - }, - - // private - getMessageHandler : function(){ - return Ext.form.MessageTargets[this.msgTarget]; - }, - - // private - getErrorCt : function(){ - return this.el.findParent('.x-form-element', 5, true) || // use form element wrap if available - this.el.findParent('.x-form-field-wrap', 5, true); // else direct field wrap - }, - - // Alignment for 'under' target - alignErrorEl : function(){ - this.errorEl.setWidth(this.getErrorCt().getWidth(true) - 20); - }, - - // Alignment for 'side' target - alignErrorIcon : function(){ - this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]); - }, - - /** - * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}. - * @return {Mixed} value The field value - */ - getRawValue : function(){ - var v = this.rendered ? this.el.getValue() : Ext.value(this.value, ''); - if(v === this.emptyText){ - v = ''; - } - return v; - }, - - /** - * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}. - * @return {Mixed} value The field value - */ - getValue : function(){ - if(!this.rendered) { - return this.value; - } - var v = this.el.getValue(); - if(v === this.emptyText || v === undefined){ - v = ''; - } - return v; - }, - - /** - * Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see {@link #setValue}. - * @param {Mixed} value The value to set - * @return {Mixed} value The field value that is set - */ - setRawValue : function(v){ - return this.rendered ? (this.el.dom.value = (Ext.isEmpty(v) ? '' : v)) : ''; - }, - - /** - * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}. - * @param {Mixed} value The value to set - * @return {Ext.form.Field} this - */ - setValue : function(v){ - this.value = v; - if(this.rendered){ - this.el.dom.value = (Ext.isEmpty(v) ? '' : v); - this.validate(); - } - return this; - }, - - // private, does not work for all fields - append : function(v){ - this.setValue([this.getValue(), v].join('')); - } - - /** - * @cfg {Boolean} autoWidth @hide - */ - /** - * @cfg {Boolean} autoHeight @hide - */ - - /** - * @cfg {String} autoEl @hide - */ -}); - - -Ext.form.MessageTargets = { - 'qtip' : { - mark: function(field, msg){ - field.el.addClass(field.invalidClass); - field.el.dom.qtip = msg; - field.el.dom.qclass = 'x-form-invalid-tip'; - if(Ext.QuickTips){ // fix for floating editors interacting with DND - Ext.QuickTips.enable(); - } - }, - clear: function(field){ - field.el.removeClass(field.invalidClass); - field.el.dom.qtip = ''; - } - }, - 'title' : { - mark: function(field, msg){ - field.el.addClass(field.invalidClass); - field.el.dom.title = msg; - }, - clear: function(field){ - field.el.dom.title = ''; - } - }, - 'under' : { - mark: function(field, msg){ - field.el.addClass(field.invalidClass); - if(!field.errorEl){ - var elp = field.getErrorCt(); - if(!elp){ // field has no container el - field.el.dom.title = msg; - return; - } - field.errorEl = elp.createChild({cls:'x-form-invalid-msg'}); - field.on('resize', field.alignErrorEl, field); - field.on('destroy', function(){ - Ext.destroy(this.errorEl); - }, field); - } - field.alignErrorEl(); - field.errorEl.update(msg); - Ext.form.Field.msgFx[field.msgFx].show(field.errorEl, field); - }, - clear: function(field){ - field.el.removeClass(field.invalidClass); - if(field.errorEl){ - Ext.form.Field.msgFx[field.msgFx].hide(field.errorEl, field); - }else{ - field.el.dom.title = ''; - } - } - }, - 'side' : { - mark: function(field, msg){ - field.el.addClass(field.invalidClass); - if(!field.errorIcon){ - var elp = field.getErrorCt(); - if(!elp){ // field has no container el - field.el.dom.title = msg; - return; - } - field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'}); - field.on('resize', field.alignErrorIcon, field); - field.on('destroy', function(){ - Ext.destroy(this.errorIcon); - }, field); - } - field.alignErrorIcon(); - field.errorIcon.dom.qtip = msg; - field.errorIcon.dom.qclass = 'x-form-invalid-tip'; - field.errorIcon.show(); - }, - clear: function(field){ - field.el.removeClass(field.invalidClass); - if(field.errorIcon){ - field.errorIcon.dom.qtip = ''; - field.errorIcon.hide(); - }else{ - field.el.dom.title = ''; - } - } - } -}; - -// anything other than normal should be considered experimental -Ext.form.Field.msgFx = { - normal : { - show: function(msgEl, f){ - msgEl.setDisplayed('block'); - }, - - hide : function(msgEl, f){ - msgEl.setDisplayed(false).update(''); - } - }, - - slide : { - show: function(msgEl, f){ - msgEl.slideIn('t', {stopFx:true}); - }, - - hide : function(msgEl, f){ - msgEl.slideOut('t', {stopFx:true,useDisplay:true}); - } - }, - - slideRight : { - show: function(msgEl, f){ - msgEl.fixDisplay(); - msgEl.alignTo(f.el, 'tl-tr'); - msgEl.slideIn('l', {stopFx:true}); - }, - - hide : function(msgEl, f){ - msgEl.slideOut('l', {stopFx:true,useDisplay:true}); - } - } -}; -Ext.reg('field', Ext.form.Field); -/** - * @class Ext.form.TextField - * @extends Ext.form.Field - *

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.TextArea} - * and {@link Ext.form.ComboBox}).

- *

Validation

- *

The validation procedure is described in the documentation for {@link #validateValue}.

- *

Alter Validation Behavior

- *

Validation behavior for each field can be configured:

- *
- * - * @constructor Creates a new TextField - * @param {Object} config Configuration options - * - * @xtype textfield - */ -Ext.form.TextField = Ext.extend(Ext.form.Field, { - /** - * @cfg {String} vtypeText A custom error message to display in place of the default message provided - * for the {@link #vtype} currently set for this field (defaults to ''). Note: - * only applies if {@link #vtype} is set, else ignored. - */ - /** - * @cfg {RegExp} stripCharsRe A JavaScript RegExp object used to strip unwanted content from the value - * before validation (defaults to null). - */ - /** - * @cfg {Boolean} grow true if this field should automatically grow and shrink to its content - * (defaults to false) - */ - grow : false, - /** - * @cfg {Number} growMin The minimum width to allow when {@link #grow} = true (defaults - * to 30) - */ - growMin : 30, - /** - * @cfg {Number} growMax The maximum width to allow when {@link #grow} = true (defaults - * to 800) - */ - growMax : 800, - /** - * @cfg {String} vtype A validation type name as defined in {@link Ext.form.VTypes} (defaults to null) - */ - vtype : null, - /** - * @cfg {RegExp} maskRe An input mask regular expression that will be used to filter keystrokes that do - * not match (defaults to null) - */ - maskRe : null, - /** - * @cfg {Boolean} disableKeyFilter Specify true to disable input keystroke filtering (defaults - * to false) - */ - disableKeyFilter : false, - /** - * @cfg {Boolean} allowBlank Specify false to validate that the value's length is > 0 (defaults to - * true) - */ - allowBlank : true, - /** - * @cfg {Number} minLength Minimum input field length required (defaults to 0) - */ - 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 {@link Ext.form.Field#autoCreate autoCreate} to add - * any attributes you want to a field, for example:

-var myField = new Ext.form.NumberField({
-    id: 'mobile',
-    anchor:'90%',
-    fieldLabel: 'Mobile',
-    maxLength: 16, // for validation
-    autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'}
-});
-
- */ - maxLength : Number.MAX_VALUE, - /** - * @cfg {String} minLengthText Error text to display if the {@link #minLength minimum length} - * validation fails (defaults to 'The minimum length for this field is {minLength}') - */ - minLengthText : 'The minimum length for this field is {0}', - /** - * @cfg {String} maxLengthText Error text to display if the {@link #maxLength maximum length} - * validation fails (defaults to 'The maximum length for this field is {maxLength}') - */ - maxLengthText : 'The maximum length for this field is {0}', - /** - * @cfg {Boolean} selectOnFocus true to automatically select any existing field text when the field - * receives input focus (defaults to false) - */ - selectOnFocus : false, - /** - * @cfg {String} blankText The error text to display if the {@link #allowBlank} validation - * fails (defaults to 'This field is required') - */ - blankText : 'This field is required', - /** - * @cfg {Function} validator - *

A custom validation function to be called during field validation ({@link #validateValue}) - * (defaults to null). If specified, this function will be called first, allowing the - * developer to override the default validation process.

- *

This function will be passed the following Parameters:

- *
- *

This function is to Return:

- *
- */ - validator : null, - /** - * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation - * (defaults to null). If the test fails, the field will be marked invalid using - * {@link #regexText}. - */ - regex : null, - /** - * @cfg {String} regexText The error text to display if {@link #regex} is used and the - * test fails during validation (defaults to '') - */ - regexText : '', - /** - * @cfg {String} emptyText The default text to place into an empty field (defaults to null). - * Note: that this value will be submitted to the server if this field is enabled and configured - * with a {@link #name}. - */ - emptyText : null, - /** - * @cfg {String} emptyClass The CSS class to apply to an empty field to style the {@link #emptyText} - * (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed - * depending on the current field value. - */ - emptyClass : 'x-form-empty-field', - - /** - * @cfg {Boolean} enableKeyEvents true to enable the proxying of key events for the HTML input - * field (defaults to false) - */ - - initComponent : function(){ - Ext.form.TextField.superclass.initComponent.call(this); - this.addEvents( - /** - * @event autosize - * Fires when the {@link #autoSize} function is triggered. The field may or - * may not have actually changed size according to the default logic, but this event provides - * a hook for the developer to apply additional logic at runtime to resize the field if needed. - * @param {Ext.form.Field} this This text field - * @param {Number} width The new field width - */ - 'autosize', - - /** - * @event keydown - * Keydown input field event. This event only fires if {@link #enableKeyEvents} - * is set to true. - * @param {Ext.form.TextField} this This text field - * @param {Ext.EventObject} e - */ - 'keydown', - /** - * @event keyup - * Keyup input field event. This event only fires if {@link #enableKeyEvents} - * is set to true. - * @param {Ext.form.TextField} this This text field - * @param {Ext.EventObject} e - */ - 'keyup', - /** - * @event keypress - * Keypress input field event. This event only fires if {@link #enableKeyEvents} - * is set to true. - * @param {Ext.form.TextField} this This text field - * @param {Ext.EventObject} e - */ - 'keypress' - ); - }, - - // private - initEvents : function(){ - Ext.form.TextField.superclass.initEvents.call(this); - if(this.validationEvent == 'keyup'){ - this.validationTask = new Ext.util.DelayedTask(this.validate, this); - this.mon(this.el, 'keyup', this.filterValidation, this); - } - else if(this.validationEvent !== false && this.validationEvent != 'blur'){ - this.mon(this.el, this.validationEvent, this.validate, this, {buffer: this.validationDelay}); - } - if(this.selectOnFocus || this.emptyText){ - this.mon(this.el, 'mousedown', this.onMouseDown, this); - - if(this.emptyText){ - this.applyEmptyText(); - } - } - if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Ext.form.VTypes[this.vtype+'Mask']))){ - this.mon(this.el, 'keypress', this.filterKeys, this); - } - if(this.grow){ - this.mon(this.el, 'keyup', this.onKeyUpBuffered, this, {buffer: 50}); - this.mon(this.el, 'click', this.autoSize, this); - } - if(this.enableKeyEvents){ - this.mon(this.el, { - scope: this, - keyup: this.onKeyUp, - keydown: this.onKeyDown, - keypress: this.onKeyPress - }); - } - }, - - onMouseDown: function(e){ - if(!this.hasFocus){ - this.mon(this.el, 'mouseup', Ext.emptyFn, this, { single: true, preventDefault: true }); - } - }, - - processValue : function(value){ - if(this.stripCharsRe){ - var newValue = value.replace(this.stripCharsRe, ''); - if(newValue !== value){ - this.setRawValue(newValue); - return newValue; - } - } - return value; - }, - - filterValidation : function(e){ - if(!e.isNavKeyPress()){ - this.validationTask.delay(this.validationDelay); - } - }, - - //private - onDisable: function(){ - Ext.form.TextField.superclass.onDisable.call(this); - if(Ext.isIE){ - this.el.dom.unselectable = 'on'; - } - }, - - //private - onEnable: function(){ - Ext.form.TextField.superclass.onEnable.call(this); - if(Ext.isIE){ - this.el.dom.unselectable = ''; - } - }, - - // private - onKeyUpBuffered : function(e){ - if(this.doAutoSize(e)){ - this.autoSize(); - } - }, - - // private - doAutoSize : function(e){ - return !e.isNavKeyPress(); - }, - - // private - onKeyUp : function(e){ - this.fireEvent('keyup', this, e); - }, - - // private - onKeyDown : function(e){ - this.fireEvent('keydown', this, e); - }, - - // private - 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 {@link #emptyText} and {@link #emptyClass} if the - * original value was blank. - */ - reset : function(){ - Ext.form.TextField.superclass.reset.call(this); - this.applyEmptyText(); - }, - - applyEmptyText : function(){ - if(this.rendered && this.emptyText && this.getRawValue().length < 1 && !this.hasFocus){ - this.setRawValue(this.emptyText); - this.el.addClass(this.emptyClass); - } - }, - - // private - preFocus : function(){ - var el = this.el; - if(this.emptyText){ - if(el.dom.value == this.emptyText){ - this.setRawValue(''); - } - el.removeClass(this.emptyClass); - } - if(this.selectOnFocus){ - el.dom.select(); - } - }, - - // private - postBlur : function(){ - this.applyEmptyText(); - }, - - // private - filterKeys : function(e){ - if(e.ctrlKey){ - return; - } - var k = e.getKey(); - if(Ext.isGecko && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){ - return; - } - var cc = String.fromCharCode(e.getCharCode()); - if(!Ext.isGecko && e.isSpecialKey() && !cc){ - return; - } - if(!this.maskRe.test(cc)){ - e.stopEvent(); - } - }, - - setValue : function(v){ - if(this.emptyText && this.el && !Ext.isEmpty(v)){ - this.el.removeClass(this.emptyClass); - } - Ext.form.TextField.superclass.setValue.apply(this, arguments); - this.applyEmptyText(); - this.autoSize(); - return this; - }, - - /** - *

Validates a value according to the field's validation rules and marks the field as invalid - * if the validation fails. Validation rules are processed in the following order:

- *