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

281 lines
No EOL
12 KiB
HTML
Raw Blame History

<html><head><title>TextField.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>TextField.js</h1><pre class="highlighted"><code><i>/**
* @class Ext.form.TextField
* @extends Ext.form.Field
* Basic text field. Can be used as a direct replacement <b>for</b> traditional text inputs, or as the base
* class <b>for</b> more sophisticated input controls (like {@link Ext.form.TextArea} and {@link Ext.form.ComboBox}).
* @constructor
* Creates a <b>new</b> TextField
* @param {Object} config Configuration options
*/</i>
Ext.form.TextField = <b>function</b>(config){
Ext.form.TextField.superclass.constructor.call(<b>this</b>, config);
<b>this</b>.addEvents({
<i>/**
* @event autosize
* Fires when the autosize <b>function</b> is triggered. The field may or may not have actually changed size
* according to the <b>default</b> logic, but <b>this</b> event provides a hook <b>for</b> the developer to apply additional
* logic at runtime to resize the field <b>if</b> needed.
* @param {Ext.form.Field} <b>this</b> This text field
* @param {Number} width The <b>new</b> field width
*/</i>
autosize : true
});
};
Ext.extend(Ext.form.TextField, Ext.form.Field, {
<i>/**
* @cfg {Boolean} grow True <b>if</b> this field should automatically grow and shrink to its content
*/</i>
grow : false,
<i>/**
* @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
*/</i>
growMin : 30,
<i>/**
* @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
*/</i>
growMax : 800,
<i>/**
* @cfg {String} vtype A validation type name as defined <b>in</b> {@link Ext.form.VTypes} (defaults to null)
*/</i>
vtype : null,
<i>/**
* @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
*/</i>
maskRe : null,
<i>/**
* @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
*/</i>
disableKeyFilter : false,
<i>/**
* @cfg {Boolean} allowBlank False to validate that the value length &gt; 0 (defaults to true)
*/</i>
allowBlank : true,
<i>/**
* @cfg {Number} minLength Minimum input field length required (defaults to 0)
*/</i>
minLength : 0,
<i>/**
* @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
*/</i>
maxLength : Number.MAX_VALUE,
<i>/**
* @cfg {String} minLengthText Error text to display <b>if</b> the minimum length validation fails (defaults to &quot;The minimum length <b>for</b> this field is {minLength}&quot;)
*/</i>
minLengthText : &quot;The minimum length <b>for</b> this field is {0}&quot;,
<i>/**
* @cfg {String} maxLengthText Error text to display <b>if</b> the maximum length validation fails (defaults to &quot;The maximum length <b>for</b> this field is {maxLength}&quot;)
*/</i>
maxLengthText : &quot;The maximum length <b>for</b> this field is {0}&quot;,
<i>/**
* @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
*/</i>
selectOnFocus : false,
<i>/**
* @cfg {String} blankText Error text to display <b>if</b> the allow blank validation fails (defaults to &quot;This field is required&quot;)
*/</i>
blankText : &quot;This field is required&quot;,
<i>/**
* @cfg {Function} validator A custom validation <b>function</b> to be called during field validation (defaults to null).
* If available, <b>this</b> function will be called only after the basic validators all <b>return</b> true, and will be passed the
* current field value and expected to <b>return</b> boolean true <b>if</b> the value is valid or a string error message <b>if</b> invalid.
*/</i>
validator : null,
<i>/**
* @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
* If available, <b>this</b> regex will be evaluated only after the basic validators all <b>return</b> true, and will be passed the
* current field value. If the test fails, the field will be marked invalid using {@link #regexText}.
*/</i>
regex : null,
<i>/**
* @cfg {String} regexText The error text to display <b>if</b> {@link #regex} is used and the test fails during validation (defaults to &quot;&quot;)
*/</i>
regexText : &quot;&quot;,
<i>/**
* @cfg {String} emptyText The <b>default</b> text to display <b>in</b> an empty field (defaults to null).
*/</i>
emptyText : null,
<i>/**
* @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.
*/</i>
emptyClass : 'x-form-empty-field',
<i>// private</i>
initEvents : <b>function</b>(){
Ext.form.TextField.superclass.initEvents.call(<b>this</b>);
<b>if</b>(this.validationEvent == 'keyup'){
<b>this</b>.validationTask = <b>new</b> Ext.util.DelayedTask(<b>this</b>.validate, <b>this</b>);
<b>this</b>.el.on('keyup', <b>this</b>.filterValidation, <b>this</b>);
}
<b>else</b> if(<b>this</b>.validationEvent !== false){
<b>this</b>.el.on(<b>this</b>.validationEvent, <b>this</b>.validate, <b>this</b>, {buffer: <b>this</b>.validationDelay});
}
<b>if</b>(this.selectOnFocus || <b>this</b>.emptyText){
<b>this</b>.on(&quot;focus&quot;, <b>this</b>.preFocus, <b>this</b>);
<b>if</b>(this.emptyText){
<b>this</b>.on('blur', <b>this</b>.postBlur, <b>this</b>);
<b>this</b>.applyEmptyText();
}
}
<b>if</b>(this.maskRe || (<b>this</b>.vtype &amp;&amp; <b>this</b>.disableKeyFilter !== true &amp;&amp; (<b>this</b>.maskRe = Ext.form.VTypes[<b>this</b>.vtype+'Mask']))){
<b>this</b>.el.on(&quot;keypress&quot;, <b>this</b>.filterKeys, <b>this</b>);
}
<b>if</b>(this.grow){
<b>this</b>.el.on(&quot;keyup&quot;, <b>this</b>.onKeyUp, <b>this</b>, {buffer:50});
<b>this</b>.el.on(&quot;click&quot;, <b>this</b>.autoSize, <b>this</b>);
}
},
filterValidation : <b>function</b>(e){
<b>if</b>(!e.isNavKeyPress()){
<b>this</b>.validationTask.delay(<b>this</b>.validationDelay);
}
},
<i>// private</i>
onKeyUp : <b>function</b>(e){
<b>if</b>(!e.isNavKeyPress()){
<b>this</b>.autoSize();
}
},
<i>/**
* Resets the current field value to the originally-loaded value and clears any validation messages.
* Also adds emptyText and emptyClass <b>if</b> the original value was blank.
*/</i>
reset : <b>function</b>(){
Ext.form.TextField.superclass.reset.call(<b>this</b>);
<b>this</b>.applyEmptyText();
},
applyEmptyText : <b>function</b>(){
<b>if</b>(this.rendered &amp;&amp; <b>this</b>.emptyText &amp;&amp; <b>this</b>.getRawValue().length &lt; 1){
<b>this</b>.setRawValue(<b>this</b>.emptyText);
<b>this</b>.el.addClass(<b>this</b>.emptyClass);
}
},
<i>// private</i>
preFocus : <b>function</b>(){
<b>if</b>(this.emptyText){
<b>if</b>(this.getRawValue() == <b>this</b>.emptyText){
<b>this</b>.setRawValue('');
}
<b>this</b>.el.removeClass(<b>this</b>.emptyClass);
}
<b>if</b>(this.selectOnFocus){
<b>this</b>.el.dom.select();
}
},
<i>// private</i>
postBlur : <b>function</b>(){
<b>this</b>.applyEmptyText();
},
<i>// private</i>
filterKeys : <b>function</b>(e){
<b>var</b> k = e.getKey();
<b>if</b>(!Ext.isIE &amp;&amp; (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE &amp;&amp; e.button == -1))){
<b>return</b>;
}
<b>var</b> c = e.getCharCode();
<b>if</b>(!<b>this</b>.maskRe.test(String.fromCharCode(c) || '')){
e.stopEvent();
}
},
setValue : <b>function</b>(v){
<b>if</b>(this.emptyText &amp;&amp; v !== undefined &amp;&amp; v !== null &amp;&amp; v !== ''){
<b>this</b>.el.removeClass(<b>this</b>.emptyClass);
}
Ext.form.TextField.superclass.setValue.apply(<b>this</b>, arguments);
},
<i>/**
* Validates a value according to the field's validation rules and marks the field as invalid
* <b>if</b> the validation fails
* @param {Mixed} value The value to validate
* @<b>return</b> {Boolean} True <b>if</b> the value is valid, <b>else</b> false
*/</i>
validateValue : <b>function</b>(value){
<b>if</b>(value.length &lt; 1 || value === <b>this</b>.emptyText){ <i>// <b>if</b> it's blank</i>
<b>if</b>(this.allowBlank){
<b>this</b>.clearInvalid();
<b>return</b> true;
}<b>else</b>{
<b>this</b>.markInvalid(<b>this</b>.blankText);
<b>return</b> false;
}
}
<b>if</b>(value.length &lt; <b>this</b>.minLength){
<b>this</b>.markInvalid(String.format(<b>this</b>.minLengthText, <b>this</b>.minLength));
<b>return</b> false;
}
<b>if</b>(value.length &gt; <b>this</b>.maxLength){
<b>this</b>.markInvalid(String.format(<b>this</b>.maxLengthText, <b>this</b>.maxLength));
<b>return</b> false;
}
<b>if</b>(this.vtype){
<b>var</b> vt = Ext.form.VTypes;
<b>if</b>(!vt[<b>this</b>.vtype](value)){
<b>this</b>.markInvalid(<b>this</b>.vtypeText || vt[<b>this</b>.vtype +'Text']);
<b>return</b> false;
}
}
<b>if</b>(typeof <b>this</b>.validator == &quot;<b>function</b>&quot;){
<b>var</b> msg = <b>this</b>.validator(value);
<b>if</b>(msg !== true){
<b>this</b>.markInvalid(msg);
<b>return</b> false;
}
}
<b>if</b>(this.regex &amp;&amp; !<b>this</b>.regex.test(value)){
<b>this</b>.markInvalid(<b>this</b>.regexText);
<b>return</b> false;
}
<b>return</b> true;
},
<i>/**
* Selects text <b>in</b> 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)
*/</i>
selectText : <b>function</b>(start, end){
<b>var</b> v = <b>this</b>.getRawValue();
<b>if</b>(v.length &gt; 0){
start = start === undefined ? 0 : start;
end = end === undefined ? v.length : end;
<b>var</b> d = <b>this</b>.el.dom;
<b>if</b>(d.setSelectionRange){
d.setSelectionRange(start, end);
}<b>else</b> if(d.createTextRange){
<b>var</b> range = d.createTextRange();
range.moveStart(&quot;character&quot;, start);
range.moveEnd(&quot;character&quot;, v.length-end);
range.select();
}
}
},
<i>/**
* Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
* This only takes effect <b>if</b> grow = true and fires the autosize event.
*/</i>
autoSize : <b>function</b>(){
<b>if</b>(!<b>this</b>.grow || !<b>this</b>.rendered){
<b>return</b>;
}
<b>if</b>(!<b>this</b>.metrics){
<b>this</b>.metrics = Ext.util.TextMetrics.createInstance(<b>this</b>.el);
}
<b>var</b> el = <b>this</b>.el;
<b>var</b> v = el.dom.value + &quot;&amp;#160;&quot;;
<b>var</b> w = Math.min(<b>this</b>.growMax, Math.max(<b>this</b>.metrics.getWidth(v) + <i>/* add extra padding */</i> 10, <b>this</b>.growMin));
<b>this</b>.el.setWidth(w);
<b>this</b>.fireEvent(&quot;autosize&quot;, <b>this</b>, w);
}
});</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