upgraded yui to 2.2.2 and yui-ext to 1.0.1a
This commit is contained in:
JT Smith
parent
4d9af2c691
commit
547ced6500
1992 changed files with 645731 additions and 0 deletions
491
www/extras/yui-ext/docs/output/Field.jss.html
Normal file
491
www/extras/yui-ext/docs/output/Field.jss.html
Normal file
|
|
@ -0,0 +1,491 @@
|
|||
<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 "x-form-invalid")
|
||||
*/</i>
|
||||
invalidClass : "x-form-invalid",
|
||||
<i>/**
|
||||
* @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided (defaults to "The value <b>in</b> this field is invalid")
|
||||
*/</i>
|
||||
invalidText : "The value <b>in</b> this field is invalid",
|
||||
<i>/**
|
||||
* @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
|
||||
*/</i>
|
||||
focusClass : "x-form-focus",
|
||||
<i>/**
|
||||
* @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
|
||||
automatic validation. (defaults to "keyup")
|
||||
*/</i>
|
||||
validationEvent : "keyup",
|
||||
<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: "input", type: "text", size: "20", autocomplete: "off"})
|
||||
*/</i>
|
||||
defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"},
|
||||
<i>/**
|
||||
* @cfg {String} fieldClass The <b>default</b> CSS class <b>for</b> the field (defaults to "x-form-field")
|
||||
*/</i>
|
||||
fieldClass: "x-form-field",
|
||||
<i>/**
|
||||
* @cfg {String} msgTarget The location where error text should display. Should be one of the following values (defaults to 'qtip'):
|
||||
*<pre>
|
||||
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
|
||||
</pre>
|
||||
*/</i>
|
||||
msgTarget: 'qtip',
|
||||
<i>/**
|
||||
* @cfg {String} msgFx <b>Experimental</b> 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 "text")
|
||||
*/</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 && <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. <b>This is used instead of render().</b>
|
||||
* @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 && (<b>this</b>.width || <b>this</b>.height)){
|
||||
<b>this</b>.setSize(<b>this</b>.width || "", <b>this</b>.height || "");
|
||||
}
|
||||
<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 > 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("specialkey", <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 ? "keydown" : "keypress", <b>this</b>.fireKey, <b>this</b>);
|
||||
<b>this</b>.el.on("focus", <b>this</b>.onFocus, <b>this</b>);
|
||||
<b>this</b>.el.on("blur", <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("focus", <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 && <b>this</b>.validateOnBlur && <b>this</b>.validationEvent != "blur"){
|
||||
<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("blur", <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' && Ext.isStrict && !Ext.isSafari){
|
||||
<b>if</b>(Ext.isIE && (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 && 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 © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
||||
</body></html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue