oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/extjs/docs/output/Field.jss.html

491 lines
No EOL
18 KiB
HTML
Raw Blame History

<html><head><title>Field.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Field.js</h1><pre class="highlighted"><code><i>/**
* @class Ext.form.Field
* @extends Ext.Component
* Base class <b>for</b> form fields that provides <b>default</b> event handling, sizing, value handling and other functionality.
* @constructor
* Creates a <b>new</b> Field
* @param {Object} config Configuration options
*/</i>
Ext.form.Field = <b>function</b>(config){
Ext.form.Field.superclass.constructor.call(<b>this</b>, config);
<b>this</b>.addEvents({
<i>/**
* @event focus
* Fires when <b>this</b> field receives input focus
* @param {Ext.form.Field} <b>this</b>
*/</i>
focus : true,
<i>/**
* @event blur
* Fires when
* @param {Ext.form.Field} <b>this</b>
*/</i>
blur : true,
<i>/**
* @event specialkey
* Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
* {@link Ext.EventObject#getKey} to determine which key was pressed.
* @param {Ext.form.Field} <b>this</b>
* @param {Ext.EventObject} e The event object
*/</i>
specialkey : true,
<i>/**
* @event change
* Fires just before the field blurs <b>if</b> the field value has changed
* @param {Ext.form.Field} <b>this</b>
* @param {Mixed} value The changed value
* @param {Mixed} value The original value
*/</i>
change : true,
<i>/**
* @event invalid
* Fires after the field has been marked as invalid
* @param {Ext.form.Field} <b>this</b>
* @param {String} msg The validation message
*/</i>
invalid : true,
<i>/**
* @event valid
* Fires after the field has been validated <b>with</b> no errors
* @param {Ext.form.Field} <b>this</b>
*/</i>
valid : true
});
};
Ext.extend(Ext.form.Field, Ext.Component, {
<i>/**
* @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to &quot;x-form-invalid&quot;)
*/</i>
invalidClass : &quot;x-form-invalid&quot;,
<i>/**
* @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided (defaults to &quot;The value <b>in</b> this field is invalid&quot;)
*/</i>
invalidText : &quot;The value <b>in</b> this field is invalid&quot;,
<i>/**
* @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to &quot;x-form-focus&quot;)
*/</i>
focusClass : &quot;x-form-focus&quot;,
<i>/**
* @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
automatic validation. (defaults to &quot;keyup&quot;)
*/</i>
validationEvent : &quot;keyup&quot;,
<i>/**
* @cfg {String/Boolean} validateOnBlur Defaults to true.
*/</i>
validateOnBlur : true,
<i>/**
* @cfg {Number} validationDelay The length of time <b>in</b> milliseconds after user input begins until validation is initiated (defaults to 250)
*/</i>
validationDelay : 250,
<i>/**
* @cfg {String/Object} autoCreate A DomHelper element spec, or true <b>for</b> a <b>default</b> element spec (defaults to
* {tag: &quot;input&quot;, type: &quot;text&quot;, size: &quot;20&quot;, autocomplete: &quot;off&quot;})
*/</i>
defaultAutoCreate : {tag: &quot;input&quot;, type: &quot;text&quot;, size: &quot;20&quot;, autocomplete: &quot;off&quot;},
<i>/**
* @cfg {String} fieldClass The <b>default</b> CSS class <b>for</b> the field (defaults to &quot;x-form-field&quot;)
*/</i>
fieldClass: &quot;x-form-field&quot;,
<i>/**
* @cfg {String} msgTarget The location where error text should display. Should be one of the following values (defaults to 'qtip'):
*&lt;pre&gt;
Value Description
----------- ----------------------------------------------------------------------
qtip Display a quick tip when the user hovers over the field
title Display a <b>default</b> browser title attribute popup
under Add a block div beneath the field containing the error text
side Add an error icon to the right of the field <b>with</b> a popup on hover
[element id] Add the error text directly to the innerHTML of the specified element
&lt;/pre&gt;
*/</i>
msgTarget: 'qtip',
<i>/**
* @cfg {String} msgFx &lt;b&gt;Experimental&lt;/b&gt; The effect used when displaying a validation message under the field (defaults to 'normal').
*/</i>
msgFx : 'normal',
<i>/**
* @cfg {String} inputType The type attribute <b>for</b> input fields - e.g. radio, text, password. (defaults to &quot;text&quot;)
*/</i>
inputType : undefined,
<i>// private</i>
isFormField : true,
<i>// private</i>
hasFocus : false,
<i>/**
* @cfg {Mixed} value A value to initialize <b>this</b> field <b>with</b>
*/</i>
value : undefined,
<i>/**
* Returns the name attribute of the field <b>if</b> available
* @<b>return</b> {String} name The field name
*/</i>
getName: <b>function</b>(){
<b>return</b> this.rendered &amp;&amp; <b>this</b>.el.dom.name ? <b>this</b>.el.dom.name : (<b>this</b>.hiddenName || '');
},
<i>/**
* Apply the behaviors of <b>this</b> component to an existing element. &lt;b&gt;This is used instead of render().&lt;/b&gt;
* @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element
* @<b>return</b> {Ext.form.Field} <b>this</b>
*/</i>
applyTo : <b>function</b>(target){
<b>this</b>.target = target;
<b>this</b>.el = Ext.get(target);
<b>this</b>.render(<b>this</b>.el.dom.parentNode);
<b>return</b> this;
},
<i>// private</i>
onRender : <b>function</b>(ct, position){
<b>if</b>(this.el){
<b>this</b>.el = Ext.get(<b>this</b>.el);
<b>if</b>(!<b>this</b>.target){
ct.dom.appendChild(<b>this</b>.el.dom);
}
}<b>else</b> {
<b>var</b> cfg = <b>this</b>.getAutoCreate();
<b>if</b>(!cfg.name){
cfg.name = <b>this</b>.name || <b>this</b>.id;
}
<b>if</b>(this.inputType){
cfg.type = <b>this</b>.inputType;
}
<b>if</b>(this.tabIndex !== undefined){
cfg.tabIndex = <b>this</b>.tabIndex;
}
<b>this</b>.el = ct.createChild(cfg, position);
}
<b>var</b> type = <b>this</b>.el.dom.type;
<b>if</b>(type){
<b>if</b>(type == 'password'){
type = 'text';
}
<b>this</b>.el.addClass('x-form-'+type);
}
<b>if</b>(!<b>this</b>.customSize &amp;&amp; (<b>this</b>.width || <b>this</b>.height)){
<b>this</b>.setSize(<b>this</b>.width || &quot;&quot;, <b>this</b>.height || &quot;&quot;);
}
<b>if</b>(this.readOnly){
<b>this</b>.el.dom.readOnly = true;
}
<b>this</b>.el.addClass([<b>this</b>.fieldClass, <b>this</b>.cls]);
<b>this</b>.initValue();
},
<i>// private</i>
initValue : <b>function</b>(){
<b>if</b>(this.value !== undefined){
<b>this</b>.setValue(<b>this</b>.value);
}<b>else</b> if(<b>this</b>.el.dom.value.length &gt; 0){
<b>this</b>.setValue(<b>this</b>.el.dom.value);
}
},
<i>// private</i>
afterRender : <b>function</b>(){
Ext.form.Field.superclass.afterRender.call(<b>this</b>);
<b>this</b>.initEvents();
},
<i>// private</i>
fireKey : <b>function</b>(e){
<b>if</b>(e.isNavKeyPress()){
<b>this</b>.fireEvent(&quot;specialkey&quot;, <b>this</b>, e);
}
},
<i>/**
* Resets the current field value to the originally-loaded value and clears any validation messages
*/</i>
reset : <b>function</b>(){
<b>this</b>.setValue(<b>this</b>.originalValue);
<b>this</b>.clearInvalid();
},
<i>// private</i>
initEvents : <b>function</b>(){
<b>this</b>.el.on(Ext.isIE ? &quot;keydown&quot; : &quot;keypress&quot;, <b>this</b>.fireKey, <b>this</b>);
<b>this</b>.el.on(&quot;focus&quot;, <b>this</b>.onFocus, <b>this</b>);
<b>this</b>.el.on(&quot;blur&quot;, <b>this</b>.onBlur, <b>this</b>);
<i>// reference to original value <b>for</b> reset</i>
<b>this</b>.originalValue = <b>this</b>.getValue();
},
<i>// private</i>
onFocus : <b>function</b>(){
<b>if</b>(!Ext.isOpera){ <i>// don't touch <b>in</b> Opera</i>
<b>this</b>.el.addClass(<b>this</b>.focusClass);
}
<b>this</b>.hasFocus = true;
<b>this</b>.startValue = <b>this</b>.getValue();
<b>this</b>.fireEvent(&quot;focus&quot;, <b>this</b>);
},
<i>// private</i>
onBlur : <b>function</b>(){
<b>this</b>.el.removeClass(<b>this</b>.focusClass);
<b>this</b>.hasFocus = false;
<b>if</b>(this.validationEvent !== false &amp;&amp; <b>this</b>.validateOnBlur &amp;&amp; <b>this</b>.validationEvent != &quot;blur&quot;){
<b>this</b>.validate();
}
<b>var</b> v = <b>this</b>.getValue();
<b>if</b>(v != <b>this</b>.startValue){
<b>this</b>.fireEvent('change', <b>this</b>, v, <b>this</b>.startValue);
}
<b>this</b>.fireEvent(&quot;blur&quot;, <b>this</b>);
},
<i>/**
* Sets the height and width of the field
* @param {Number} width The <b>new</b> field width <b>in</b> pixels
* @param {Number} height The <b>new</b> field height <b>in</b> pixels
*/</i>
setSize : <b>function</b>(w, h){
<b>if</b>(!<b>this</b>.rendered || !<b>this</b>.el){
<b>this</b>.width = w;
<b>this</b>.height = h;
<b>return</b>;
}
<b>if</b>(w){
w = <b>this</b>.adjustWidth(<b>this</b>.el.dom.tagName, w);
<b>this</b>.el.setWidth(w);
}
<b>if</b>(h){
<b>this</b>.el.setHeight(h);
}
<b>var</b> h = <b>this</b>.el.dom.offsetHeight; <i>// force browser recalc</i>
},
<i>/**
* Returns whether or not the field value is currently valid
* @param {Boolean} preventMark True to disable marking the field invalid
* @<b>return</b> {Boolean} True <b>if</b> the value is valid, <b>else</b> false
*/</i>
isValid : <b>function</b>(preventMark){
<b>if</b>(this.disabled){
<b>return</b> true;
}
<b>var</b> restore = <b>this</b>.preventMark;
<b>this</b>.preventMark = preventMark === true;
<b>var</b> v = <b>this</b>.validateValue(<b>this</b>.getRawValue());
<b>this</b>.preventMark = restore;
<b>return</b> v;
},
<i>/**
* Validates the field value
* @<b>return</b> {Boolean} True <b>if</b> the value is valid, <b>else</b> false
*/</i>
validate : <b>function</b>(){
<b>if</b>(this.disabled || <b>this</b>.validateValue(<b>this</b>.getRawValue())){
<b>this</b>.clearInvalid();
<b>return</b> true;
}
<b>return</b> false;
},
<i>// private</i>
<i>// Subclasses should provide the validation implementation by overriding <b>this</b></i>
validateValue : <b>function</b>(value){
<b>return</b> true;
},
<i>/**
* Mark <b>this</b> field as invalid
* @param {String} msg The validation message
*/</i>
markInvalid : <b>function</b>(msg){
<b>if</b>(!<b>this</b>.rendered || <b>this</b>.preventMark){ <i>// not rendered</i>
<b>return</b>;
}
<b>this</b>.el.addClass(<b>this</b>.invalidClass);
msg = msg || <b>this</b>.invalidText;
<b>switch</b>(this.msgTarget){
<b>case</b> 'qtip':
<b>this</b>.el.dom.qtip = msg;
<b>this</b>.el.dom.qclass = 'x-form-invalid-tip';
<b>break</b>;
<b>case</b> 'title':
<b>this</b>.el.dom.title = msg;
<b>break</b>;
<b>case</b> 'under':
<b>if</b>(!<b>this</b>.errorEl){
<b>var</b> elp = <b>this</b>.el.findParent('.x-form-element', 5, true);
<b>this</b>.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
<b>this</b>.errorEl.setWidth(elp.getWidth(true)-20);
}
<b>this</b>.errorEl.update(msg);
Ext.form.Field.msgFx[<b>this</b>.msgFx].show(<b>this</b>.errorEl, <b>this</b>);
<b>break</b>;
<b>case</b> 'side':
<b>if</b>(!<b>this</b>.errorIcon){
<b>var</b> elp = <b>this</b>.el.findParent('.x-form-element', 5, true);
<b>this</b>.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
}
<b>this</b>.alignErrorIcon();
<b>this</b>.errorIcon.dom.qtip = msg;
<b>this</b>.errorIcon.dom.qclass = 'x-form-invalid-tip';
<b>this</b>.errorIcon.show();
<b>break</b>;
<b>default</b>:
<b>var</b> t = Ext.getDom(<b>this</b>.msgTarget);
t.innerHTML = msg;
t.style.display = <b>this</b>.msgDisplay;
<b>break</b>;
}
<b>this</b>.fireEvent('invalid', <b>this</b>, msg);
},
<i>// private</i>
alignErrorIcon : <b>function</b>(){
<b>this</b>.errorIcon.alignTo(<b>this</b>.el, 'tl-tr', [2, 0]);
},
<i>/**
* Clear any invalid styles/messages <b>for</b> this field
*/</i>
clearInvalid : <b>function</b>(){
<b>if</b>(!<b>this</b>.rendered || <b>this</b>.preventMark){ <i>// not rendered</i>
<b>return</b>;
}
<b>this</b>.el.removeClass(<b>this</b>.invalidClass);
<b>switch</b>(this.msgTarget){
<b>case</b> 'qtip':
<b>this</b>.el.dom.qtip = '';
<b>break</b>;
<b>case</b> 'title':
<b>this</b>.el.dom.title = '';
<b>break</b>;
<b>case</b> 'under':
<b>if</b>(this.errorEl){
Ext.form.Field.msgFx[<b>this</b>.msgFx].hide(<b>this</b>.errorEl, <b>this</b>);
}
<b>break</b>;
<b>case</b> 'side':
<b>if</b>(this.errorIcon){
<b>this</b>.errorIcon.dom.qtip = '';
<b>this</b>.errorIcon.hide();
}
<b>break</b>;
<b>default</b>:
<b>var</b> t = Ext.getDom(<b>this</b>.msgTarget);
t.innerHTML = '';
t.style.display = 'none';
<b>break</b>;
}
<b>this</b>.fireEvent('valid', <b>this</b>);
},
<i>/**
* Returns the raw data value which may or may not be a valid, defined value. To <b>return</b> a normalized value see {@link #getValue}.
* @<b>return</b> {Mixed} value The field value
*/</i>
getRawValue : <b>function</b>(){
<b>return</b> this.el.getValue();
},
<i>/**
* Returns the normalized data value (undefined or emptyText will be returned as ''). To <b>return</b> the raw value see {@link #getRawValue}.
* @<b>return</b> {Mixed} value The field value
*/</i>
getValue : <b>function</b>(){
<b>var</b> v = <b>this</b>.el.getValue();
<b>if</b>(v == <b>this</b>.emptyText || v === undefined){
v = '';
}
<b>return</b> v;
},
<i>/**
* Sets the underlying DOM field's value directly, bypassing validation. To set the value <b>with</b> validation see {@link #setValue}.
* @param {Mixed} value The value to set
*/</i>
setRawValue : <b>function</b>(v){
<b>return</b> this.el.dom.value = v;
},
<i>/**
* 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
*/</i>
setValue : <b>function</b>(v){
<b>this</b>.value = v;
<b>if</b>(this.rendered){
<b>this</b>.el.dom.value = v;
<b>this</b>.validate();
}
},
<i>// private</i>
adjustWidth : <b>function</b>(tag, w){
tag = tag.toLowerCase();
<b>if</b>(typeof w == 'number' &amp;&amp; Ext.isStrict &amp;&amp; !Ext.isSafari){
<b>if</b>(Ext.isIE &amp;&amp; (tag == 'input' || tag == 'textarea')){
<b>if</b>(tag == 'input'){
<b>return</b> w + 2;
}
<b>if</b>(tag = 'textarea'){
<b>return</b> w-2;
}
}<b>else</b> if(Ext.isGecko &amp;&amp; tag == 'textarea'){
<b>return</b> w-6;
}<b>else</b> if(Ext.isOpera){
<b>if</b>(tag == 'input'){
<b>return</b> w + 2;
}
<b>if</b>(tag = 'textarea'){
<b>return</b> w-2;
}
}
}
<b>return</b> w;
}
});
<i>// anything other than normal should be considered experimental</i>
Ext.form.Field.msgFx = {
normal : {
show: <b>function</b>(msgEl, f){
msgEl.setDisplayed('block');
},
hide : <b>function</b>(msgEl, f){
msgEl.setDisplayed(false).update('');
}
},
slide : {
show: <b>function</b>(msgEl, f){
msgEl.slideIn('t', {stopFx:true});
},
hide : <b>function</b>(msgEl, f){
msgEl.slideOut('t', {stopFx:true,useDisplay:true});
}
},
slideRight : {
show: <b>function</b>(msgEl, f){
msgEl.fixDisplay();
msgEl.alignTo(f.el, 'tl-tr');
msgEl.slideIn('l', {stopFx:true});
},
hide : <b>function</b>(msgEl, f){
msgEl.slideOut('l', {stopFx:true,useDisplay:true});
}
}
};
</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
</body></html>
Reference in a new issue View git blame Copy permalink