+++ /dev/null
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-/**\r
- * @class Ext.form.Field\r
- * @extends Ext.BoxComponent\r
- * Base class for form fields that provides default event handling, sizing, value handling and other functionality.\r
- * @constructor\r
- * Creates a new Field\r
- * @param {Object} config Configuration options\r
- */\r
-Ext.form.Field = Ext.extend(Ext.BoxComponent, {\r
- /**\r
- * @cfg {String} fieldLabel The label text to display next to this field (defaults to '')\r
- * <p><b>A Field's label is not by default rendered as part of the Field's structure.\r
- * The label is rendered by the {@link Ext.layout.FormLayout form layout} layout manager\r
- * of the {@link Ext.form.Container Container} to which the Field is added.</b></p>\r
- */\r
- /**\r
- * @cfg {String} labelStyle A CSS style specification to apply directly to this field's label (defaults to the\r
- * container's labelStyle value if set, or ''). For example, <code>labelStyle: 'font-weight:bold;'</code>.\r
- */\r
- /**\r
- * @cfg {String} labelSeparator The standard separator to display after the text of each form label (defaults\r
- * to the value of {@link Ext.layout.FormLayout#labelSeparator}, which is a colon ':' by default). To display\r
- * no separator for this field's label specify empty string ''.\r
- */\r
- /**\r
- * @cfg {Boolean} hideLabel True to completely hide the label element (defaults to false)\r
- */\r
- /**\r
- * @cfg {String} clearCls The CSS class used to provide field clearing (defaults to 'x-form-clear-left')\r
- */\r
- /**\r
- * @cfg {String} itemCls An additional CSS class to apply to the wrapper's form item element of this field (defaults\r
- * to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, it allows you to write\r
- * standard CSS rules that can apply to the field, the label (if specified) or any other element within the markup for\r
- * the field. NOTE: this will not have any effect on fields that are not part of a form. Example use:\r
- * <pre><code>\r
-// Apply a style to the field's label:\r
-<style>\r
- .required .x-form-item-label {font-weight:bold;color:red;}\r
-</style>\r
-\r
-new Ext.FormPanel({\r
- height: 100,\r
- renderTo: document.body,\r
- items: [{\r
- xtype: 'textfield',\r
- fieldLabel: 'Name',\r
- itemCls: 'required' //this label will be styled\r
- },{\r
- xtype: 'textfield',\r
- fieldLabel: 'Favorite Color'\r
- }]\r
-});\r
-</code></pre>\r
- */\r
- /**\r
- * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password, file (defaults\r
- * to "text"). The types "file" and "password" must be used to render those field types currently -- there are\r
- * no separate Ext components for those. Note that if you use <tt>inputType:'file'</tt>, {@link #emptyText}\r
- * is not supported and should be avoided.\r
- */\r
- /**\r
- * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered,\r
- * not those which are built via applyTo (defaults to undefined).\r
- */\r
- /**\r
- * @cfg {Mixed} value A value to initialize this field with (defaults to undefined).\r
- */\r
- /**\r
- * @cfg {String} name The field's HTML name attribute (defaults to "").\r
- */\r
- /**\r
- * @cfg {String} cls A custom CSS class to apply to the field's underlying element (defaults to "").\r
- */\r
-\r
- /**\r
- * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")\r
- */\r
- invalidClass : "x-form-invalid",\r
- /**\r
- * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided\r
- * (defaults to "The value in this field is invalid")\r
- */\r
- invalidText : "The value in this field is invalid",\r
- /**\r
- * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")\r
- */\r
- focusClass : "x-form-focus",\r
- /**\r
- * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable\r
- automatic validation (defaults to "keyup").\r
- */\r
- validationEvent : "keyup",\r
- /**\r
- * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).\r
- */\r
- validateOnBlur : true,\r
- /**\r
- * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation\r
- * is initiated (defaults to 250)\r
- */\r
- validationDelay : 250,\r
- /**\r
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to\r
- * {tag: "input", type: "text", size: "20", autocomplete: "off"})\r
- */\r
- defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"},\r
- /**\r
- * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")\r
- */\r
- fieldClass : "x-form-field",\r
- /**\r
- * @cfg {String} msgTarget The location where error text should display. Should be one of the following values\r
- * (defaults to 'qtip'):\r
- *<pre>\r
-Value Description\r
------------ ----------------------------------------------------------------------\r
-qtip Display a quick tip when the user hovers over the field\r
-title Display a default browser title attribute popup\r
-under Add a block div beneath the field containing the error text\r
-side Add an error icon to the right of the field with a popup on hover\r
-[element id] Add the error text directly to the innerHTML of the specified element\r
-</pre>\r
- */\r
- msgTarget : 'qtip',\r
- /**\r
- * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field\r
- * (defaults to 'normal').\r
- */\r
- msgFx : 'normal',\r
- /**\r
- * @cfg {Boolean} readOnly True to mark the field as readOnly in HTML (defaults to false) -- Note: this only\r
- * sets the element's readOnly DOM attribute.\r
- */\r
- readOnly : false,\r
- /**\r
- * @cfg {Boolean} disabled True to disable the field (defaults to false).\r
- * <p>Be aware that conformant with the <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1">HTML specification</a>,\r
- * disabled Fields will not be {@link Ext.form.BasicForm#submit submitted}.</p>\r
- */\r
- disabled : false,\r
-\r
- // private\r
- isFormField : true,\r
-\r
- // private\r
- hasFocus : false,\r
-\r
- // private\r
- initComponent : function(){\r
- Ext.form.Field.superclass.initComponent.call(this);\r
- this.addEvents(\r
- /**\r
- * @event focus\r
- * Fires when this field receives input focus.\r
- * @param {Ext.form.Field} this\r
- */\r
- 'focus',\r
- /**\r
- * @event blur\r
- * Fires when this field loses input focus.\r
- * @param {Ext.form.Field} this\r
- */\r
- 'blur',\r
- /**\r
- * @event specialkey\r
- * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check\r
- * {@link Ext.EventObject#getKey} to determine which key was pressed.\r
- * @param {Ext.form.Field} this\r
- * @param {Ext.EventObject} e The event object\r
- */\r
- 'specialkey',\r
- /**\r
- * @event change\r
- * Fires just before the field blurs if the field value has changed.\r
- * @param {Ext.form.Field} this\r
- * @param {Mixed} newValue The new value\r
- * @param {Mixed} oldValue The original value\r
- */\r
- 'change',\r
- /**\r
- * @event invalid\r
- * Fires after the field has been marked as invalid.\r
- * @param {Ext.form.Field} this\r
- * @param {String} msg The validation message\r
- */\r
- 'invalid',\r
- /**\r
- * @event valid\r
- * Fires after the field has been validated with no errors.\r
- * @param {Ext.form.Field} this\r
- */\r
- 'valid'\r
- );\r
- },\r
-\r
- /**\r
- * Returns the name attribute of the field if available\r
- * @return {String} name The field name\r
- */\r
- getName: function(){\r
- return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');\r
- },\r
-\r
- // private\r
- onRender : function(ct, position){\r
- Ext.form.Field.superclass.onRender.call(this, ct, position);\r
- if(!this.el){\r
- var cfg = this.getAutoCreate();\r
- if(!cfg.name){\r
- cfg.name = this.name || this.id;\r
- }\r
- if(this.inputType){\r
- cfg.type = this.inputType;\r
- }\r
- this.el = ct.createChild(cfg, position);\r
- }\r
- var type = this.el.dom.type;\r
- if(type){\r
- if(type == 'password'){\r
- type = 'text';\r
- }\r
- this.el.addClass('x-form-'+type);\r
- }\r
- if(this.readOnly){\r
- this.el.dom.readOnly = true;\r
- }\r
- if(this.tabIndex !== undefined){\r
- this.el.dom.setAttribute('tabIndex', this.tabIndex);\r
- }\r
-\r
- this.el.addClass([this.fieldClass, this.cls]);\r
- },\r
-\r
- // private\r
- initValue : function(){\r
- if(this.value !== undefined){\r
- this.setValue(this.value);\r
- }else if(this.el.dom.value.length > 0 && this.el.dom.value != this.emptyText){\r
- this.setValue(this.el.dom.value);\r
- }\r
- // reference to original value for reset\r
- this.originalValue = this.getValue();\r
- },\r
-\r
- /**\r
- * Returns true if this field has been changed since it was originally loaded and is not disabled.\r
- */\r
- isDirty : function() {\r
- if(this.disabled) {\r
- return false;\r
- }\r
- return String(this.getValue()) !== String(this.originalValue);\r
- },\r
-\r
- // private\r
- afterRender : function(){\r
- Ext.form.Field.superclass.afterRender.call(this);\r
- this.initEvents();\r
- this.initValue();\r
- },\r
-\r
- // private\r
- fireKey : function(e){\r
- if(e.isSpecialKey()){\r
- this.fireEvent("specialkey", this, e);\r
- }\r
- },\r
-\r
- /**\r
- * Resets the current field value to the originally loaded value and clears any validation messages\r
- */\r
- reset : function(){\r
- this.setValue(this.originalValue);\r
- this.clearInvalid();\r
- },\r
-\r
- // private\r
- initEvents : function(){\r
- this.el.on(Ext.isIE || Ext.isSafari3 ? "keydown" : "keypress", this.fireKey, this);\r
- this.el.on("focus", this.onFocus, this);\r
-\r
- // fix weird FF/Win editor issue when changing OS window focus\r
- var o = this.inEditor && Ext.isWindows && Ext.isGecko ? {buffer:10} : null;\r
- this.el.on("blur", this.onBlur, this, o);\r
- },\r
-\r
- // private\r
- onFocus : function(){\r
- if(this.focusClass){\r
- this.el.addClass(this.focusClass);\r
- }\r
- if(!this.hasFocus){\r
- this.hasFocus = true;\r
- this.startValue = this.getValue();\r
- this.fireEvent("focus", this);\r
- }\r
- },\r
-\r
- // private\r
- beforeBlur : Ext.emptyFn,\r
-\r
- // private\r
- onBlur : function(){\r
- this.beforeBlur();\r
- if(this.focusClass){\r
- this.el.removeClass(this.focusClass);\r
- }\r
- this.hasFocus = false;\r
- if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){\r
- this.validate();\r
- }\r
- var v = this.getValue();\r
- if(String(v) !== String(this.startValue)){\r
- this.fireEvent('change', this, v, this.startValue);\r
- }\r
- this.fireEvent("blur", this);\r
- },\r
-\r
- /**\r
- * Returns whether or not the field value is currently valid\r
- * @param {Boolean} preventMark True to disable marking the field invalid\r
- * @return {Boolean} True if the value is valid, else false\r
- */\r
- isValid : function(preventMark){\r
- if(this.disabled){\r
- return true;\r
- }\r
- var restore = this.preventMark;\r
- this.preventMark = preventMark === true;\r
- var v = this.validateValue(this.processValue(this.getRawValue()));\r
- this.preventMark = restore;\r
- return v;\r
- },\r
-\r
- /**\r
- * Validates the field value\r
- * @return {Boolean} True if the value is valid, else false\r
- */\r
- validate : function(){\r
- if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){\r
- this.clearInvalid();\r
- return true;\r
- }\r
- return false;\r
- },\r
-\r
- // protected - should be overridden by subclasses if necessary to prepare raw values for validation\r
- processValue : function(value){\r
- return value;\r
- },\r
-\r
- // private\r
- // Subclasses should provide the validation implementation by overriding this\r
- validateValue : function(value){\r
- return true;\r
- },\r
-\r
- /**\r
- * Mark this field as invalid, using {@link #msgTarget} to determine how to display the error and\r
- * applying {@link #invalidClass} to the field's element.\r
- * @param {String} msg (optional) The validation message (defaults to {@link #invalidText})\r
- */\r
- markInvalid : function(msg){\r
- if(!this.rendered || this.preventMark){ // not rendered\r
- return;\r
- }\r
- this.el.addClass(this.invalidClass);\r
- msg = msg || this.invalidText;\r
-\r
- switch(this.msgTarget){\r
- case 'qtip':\r
- this.el.dom.qtip = msg;\r
- this.el.dom.qclass = 'x-form-invalid-tip';\r
- if(Ext.QuickTips){ // fix for floating editors interacting with DND\r
- Ext.QuickTips.enable();\r
- }\r
- break;\r
- case 'title':\r
- this.el.dom.title = msg;\r
- break;\r
- case 'under':\r
- if(!this.errorEl){\r
- var elp = this.getErrorCt();\r
- if(!elp){ // field has no container el\r
- this.el.dom.title = msg;\r
- break;\r
- }\r
- this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});\r
- this.errorEl.setWidth(elp.getWidth(true)-20);\r
- }\r
- this.errorEl.update(msg);\r
- Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this);\r
- break;\r
- case 'side':\r
- if(!this.errorIcon){\r
- var elp = this.getErrorCt();\r
- if(!elp){ // field has no container el\r
- this.el.dom.title = msg;\r
- break;\r
- }\r
- this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});\r
- }\r
- this.alignErrorIcon();\r
- this.errorIcon.dom.qtip = msg;\r
- this.errorIcon.dom.qclass = 'x-form-invalid-tip';\r
- this.errorIcon.show();\r
- this.on('resize', this.alignErrorIcon, this);\r
- break;\r
- default:\r
- var t = Ext.getDom(this.msgTarget);\r
- t.innerHTML = msg;\r
- t.style.display = this.msgDisplay;\r
- break;\r
- }\r
- this.fireEvent('invalid', this, msg);\r
- },\r
-\r
- // private\r
- getErrorCt : function(){\r
- return this.el.findParent('.x-form-element', 5, true) || // use form element wrap if available\r
- this.el.findParent('.x-form-field-wrap', 5, true); // else direct field wrap\r
- },\r
-\r
- // private\r
- alignErrorIcon : function(){\r
- this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);\r
- },\r
-\r
- /**\r
- * Clear any invalid styles/messages for this field\r
- */\r
- clearInvalid : function(){\r
- if(!this.rendered || this.preventMark){ // not rendered\r
- return;\r
- }\r
- this.el.removeClass(this.invalidClass);\r
- switch(this.msgTarget){\r
- case 'qtip':\r
- this.el.dom.qtip = '';\r
- break;\r
- case 'title':\r
- this.el.dom.title = '';\r
- break;\r
- case 'under':\r
- if(this.errorEl){\r
- Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);\r
- }\r
- break;\r
- case 'side':\r
- if(this.errorIcon){\r
- this.errorIcon.dom.qtip = '';\r
- this.errorIcon.hide();\r
- this.un('resize', this.alignErrorIcon, this);\r
- }\r
- break;\r
- default:\r
- var t = Ext.getDom(this.msgTarget);\r
- t.innerHTML = '';\r
- t.style.display = 'none';\r
- break;\r
- }\r
- this.fireEvent('valid', this);\r
- },\r
-\r
- /**\r
- * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.\r
- * @return {Mixed} value The field value\r
- */\r
- getRawValue : function(){\r
- var v = this.rendered ? this.el.getValue() : Ext.value(this.value, '');\r
- if(v === this.emptyText){\r
- v = '';\r
- }\r
- return v;\r
- },\r
-\r
- /**\r
- * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.\r
- * @return {Mixed} value The field value\r
- */\r
- getValue : function(){\r
- if(!this.rendered) {\r
- return this.value;\r
- }\r
- var v = this.el.getValue();\r
- if(v === this.emptyText || v === undefined){\r
- v = '';\r
- }\r
- return v;\r
- },\r
-\r
- /**\r
- * Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see {@link #setValue}.\r
- * @param {Mixed} value The value to set\r
- * @return {Mixed} value The field value that is set\r
- */\r
- setRawValue : function(v){\r
- return this.el.dom.value = (v === null || v === undefined ? '' : v);\r
- },\r
-\r
- /**\r
- * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.\r
- * @param {Mixed} value The value to set\r
- */\r
- setValue : function(v){\r
- this.value = v;\r
- if(this.rendered){\r
- this.el.dom.value = (v === null || v === undefined ? '' : v);\r
- this.validate();\r
- }\r
- },\r
-\r
- // private\r
- adjustSize : function(w, h){\r
- var s = Ext.form.Field.superclass.adjustSize.call(this, w, h);\r
- s.width = this.adjustWidth(this.el.dom.tagName, s.width);\r
- return s;\r
- },\r
-\r
- // private\r
- adjustWidth : function(tag, w){\r
- tag = tag.toLowerCase();\r
- if(typeof w == 'number' && !Ext.isSafari){\r
- if(Ext.isIE && (tag == 'input' || tag == 'textarea')){\r
- if(tag == 'input' && !Ext.isStrict){\r
- return this.inEditor ? w : w - 3;\r
- }\r
- if(tag == 'input' && Ext.isStrict){\r
- return w - (Ext.isIE6 ? 4 : 1);\r
- }\r
- if(tag == 'textarea' && Ext.isStrict){\r
- return w-2;\r
- }\r
- }else if(Ext.isOpera && Ext.isStrict){\r
- if(tag == 'input'){\r
- return w + 2;\r
- }\r
- if(tag == 'textarea'){\r
- return w-2;\r
- }\r
- }\r
- }\r
- return w;\r
- }\r
-\r
- /**\r
- * @cfg {Boolean} autoWidth @hide\r
- */\r
- /**\r
- * @cfg {Boolean} autoHeight @hide\r
- */\r
-\r
- /**\r
- * @cfg {String} autoEl @hide\r
- */\r
-});\r
-\r
-Ext.form.MessageTargets = {\r
- 'qtip' : {\r
- mark: function(f){\r
- this.el.dom.qtip = msg;\r
- this.el.dom.qclass = 'x-form-invalid-tip';\r
- if(Ext.QuickTips){ // fix for floating editors interacting with DND\r
- Ext.QuickTips.enable();\r
- }\r
- },\r
- clear: function(f){\r
- this.el.dom.qtip = '';\r
- }\r
- },\r
- 'title' : {\r
- mark: function(f){\r
- this.el.dom.title = msg;\r
- },\r
- clear: function(f){\r
- this.el.dom.title = '';\r
- }\r
- },\r
- 'under' : {\r
- mark: function(f){\r
- if(!this.errorEl){\r
- var elp = this.getErrorCt();\r
- if(!elp){ // field has no container el\r
- this.el.dom.title = msg;\r
- return;\r
- }\r
- this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});\r
- this.errorEl.setWidth(elp.getWidth(true)-20);\r
- }\r
- this.errorEl.update(msg);\r
- Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this);\r
- },\r
- clear: function(f){\r
- if(this.errorEl){\r
- Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);\r
- }else{\r
- this.el.dom.title = '';\r
- }\r
- }\r
- },\r
- 'side' : {\r
- mark: function(f){\r
- if(!this.errorIcon){\r
- var elp = this.getErrorCt();\r
- if(!elp){ // field has no container el\r
- this.el.dom.title = msg;\r
- return;\r
- }\r
- this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});\r
- }\r
- this.alignErrorIcon();\r
- this.errorIcon.dom.qtip = msg;\r
- this.errorIcon.dom.qclass = 'x-form-invalid-tip';\r
- this.errorIcon.show();\r
- this.on('resize', this.alignErrorIcon, this);\r
- },\r
- clear: function(f){\r
- if(this.errorIcon){\r
- this.errorIcon.dom.qtip = '';\r
- this.errorIcon.hide();\r
- this.un('resize', this.alignErrorIcon, this);\r
- }else{\r
- this.el.dom.title = '';\r
- }\r
- }\r
- },\r
- 'around' : {\r
- mark: function(f){\r
-\r
- },\r
- clear: function(f){\r
-\r
- }\r
- }\r
-};\r
-\r
-\r
-// anything other than normal should be considered experimental\r
-Ext.form.Field.msgFx = {\r
- normal : {\r
- show: function(msgEl, f){\r
- msgEl.setDisplayed('block');\r
- },\r
-\r
- hide : function(msgEl, f){\r
- msgEl.setDisplayed(false).update('');\r
- }\r
- },\r
-\r
- slide : {\r
- show: function(msgEl, f){\r
- msgEl.slideIn('t', {stopFx:true});\r
- },\r
-\r
- hide : function(msgEl, f){\r
- msgEl.slideOut('t', {stopFx:true,useDisplay:true});\r
- }\r
- },\r
-\r
- slideRight : {\r
- show: function(msgEl, f){\r
- msgEl.fixDisplay();\r
- msgEl.alignTo(f.el, 'tl-tr');\r
- msgEl.slideIn('l', {stopFx:true});\r
- },\r
-\r
- hide : function(msgEl, f){\r
- msgEl.slideOut('l', {stopFx:true,useDisplay:true});\r
- }\r
- }\r
-};\r
-Ext.reg('field', Ext.form.Field);\r
git.ithinksw.org / extjs.git / blobdiff