2800 lines
No EOL
117 KiB
HTML
2800 lines
No EOL
117 KiB
HTML
<html><head><title>Element.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Element.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.Element
|
|
* Represents an Element <b>in</b> the DOM.<br><br>
|
|
* Usage:<br>
|
|
<pre><code>
|
|
<b>var</b> el = Ext.get("my-div");
|
|
|
|
<i>// or <b>with</b> getEl</i>
|
|
<b>var</b> el = getEl("my-div");
|
|
|
|
<i>// or <b>with</b> a DOM element</i>
|
|
<b>var</b> el = Ext.get(myDivElement);
|
|
</code></pre>
|
|
* Using Ext.get() or getEl() instead of calling the constructor directly ensures you get the same object
|
|
* each call instead of constructing a <b>new</b> one.<br><br>
|
|
* <b>Animations</b><br />
|
|
* Many of the functions <b>for</b> manipulating an element have an optional "animate" parameter. The animate parameter
|
|
* should either be a boolean (true) or an object literal <b>with</b> animation options. The animation options are:
|
|
<pre>
|
|
Option Default Description
|
|
--------- -------- ---------------------------------------------
|
|
duration .35 The duration of the animation <b>in</b> seconds
|
|
easing easeOut The YUI easing method
|
|
callback none A <b>function</b> to execute when the anim completes
|
|
scope <b>this</b> The scope (<b>this</b>) of the callback <b>function</b>
|
|
</pre>
|
|
* Also, the Anim object being used <b>for</b> the animation will be set on your options object as "anim", which allows you to stop or
|
|
* manipulate the animation. Here's an example:
|
|
<pre><code>
|
|
<b>var</b> el = Ext.get("my-div");
|
|
|
|
<i>// no animation</i>
|
|
el.setWidth(100);
|
|
|
|
<i>// <b>default</b> animation</i>
|
|
el.setWidth(100, true);
|
|
|
|
<i>// animation <b>with</b> some options set</i>
|
|
el.setWidth(100, {
|
|
duration: 1,
|
|
callback: <b>this</b>.foo,
|
|
scope: <b>this</b>
|
|
});
|
|
|
|
<i>// using the "anim" property to get the Anim object</i>
|
|
<b>var</b> opt = {
|
|
duration: 1,
|
|
callback: <b>this</b>.foo,
|
|
scope: <b>this</b>
|
|
};
|
|
el.setWidth(100, opt);
|
|
...
|
|
<b>if</b>(opt.anim.isAnimated()){
|
|
opt.anim.stop();
|
|
}
|
|
</code></pre>
|
|
* <b> Composite (Collections of) Elements</b><br />
|
|
* For working <b>with</b> collections of Elements, see <a href="Ext.CompositeElement.html">Ext.CompositeElement</a>
|
|
* @constructor Create a <b>new</b> Element directly.
|
|
* @param {String/HTMLElement} element
|
|
* @param {Boolean} forceNew (optional) By <b>default</b> the constructor checks to see <b>if</b> there is already an instance of <b>this</b> element <b>in</b> the cache and <b>if</b> there is it returns the same instance. This will skip that check (useful <b>for</b> extending <b>this</b> class).
|
|
*/</i>
|
|
(<b>function</b>(){
|
|
<b>var</b> D = Ext.lib.Dom;
|
|
<b>var</b> E = Ext.lib.Event;
|
|
<b>var</b> A = Ext.lib.Anim;
|
|
|
|
<i>// local style camelizing <b>for</b> speed</i>
|
|
<b>var</b> propCache = {};
|
|
<b>var</b> camelRe = /(-[a-z])/gi;
|
|
<b>var</b> camelFn = <b>function</b>(m, a){ <b>return</b> a.charAt(1).toUpperCase(); };
|
|
<b>var</b> view = document.defaultView;
|
|
|
|
Ext.Element = <b>function</b>(element, forceNew){
|
|
<b>var</b> dom = <b>typeof</b> element == "string" ?
|
|
document.getElementById(element) : element;
|
|
<b>if</b>(!dom){ <i>// invalid id/element</i>
|
|
<b>return</b> null;
|
|
}
|
|
<b>if</b>(!forceNew && Ext.Element.cache[dom.id]){ <i>// element object already exists</i>
|
|
<b>return</b> Ext.Element.cache[dom.id];
|
|
}
|
|
<i>/**
|
|
* The DOM element
|
|
* @type HTMLElement
|
|
*/</i>
|
|
<b>this</b>.dom = dom;
|
|
|
|
<i>/**
|
|
* The DOM element ID
|
|
* @type String
|
|
*/</i>
|
|
<b>this</b>.id = dom.id || Ext.id(dom);
|
|
};
|
|
|
|
<b>var</b> El = Ext.Element;
|
|
|
|
El.prototype = {
|
|
<i>/**
|
|
* The element's <b>default</b> display mode @type String
|
|
*/</i>
|
|
originalDisplay : "",
|
|
|
|
visibilityMode : 1,
|
|
<i>/**
|
|
* The <b>default</b> unit to append to CSS values where a unit isn't provided (Defaults to px).
|
|
* @type String
|
|
*/</i>
|
|
defaultUnit : "px",
|
|
<i>/**
|
|
* Sets the elements visibility mode. When setVisible() is called it
|
|
* will use <b>this</b> to determine whether to set the visibility or the display property.
|
|
* @param visMode Element.VISIBILITY or Element.DISPLAY
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setVisibilityMode : <b>function</b>(visMode){
|
|
<b>this</b>.visibilityMode = visMode;
|
|
<b>return</b> this;
|
|
},
|
|
<i>/**
|
|
* Convenience method <b>for</b> setVisibilityMode(Element.DISPLAY)
|
|
* @param {String} display (optional) What to set display to when visible
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
enableDisplayMode : <b>function</b>(display){
|
|
<b>this</b>.setVisibilityMode(El.DISPLAY);
|
|
<b>if</b>(typeof display != "undefined") <b>this</b>.originalDisplay = display;
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Looks at <b>this</b> node and then at parent nodes <b>for</b> a match of the passed simple selector (e.g. div.some-class or span:first-child)
|
|
* @param {String} ss The simple selector to test
|
|
* @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
|
|
search as a number or element (defaults to 10 || document.body)
|
|
* @param {Boolean} returnEl (optional) True to <b>return</b> a Ext.Element object instead of DOM node
|
|
* @<b>return</b> {HTMLElement}
|
|
*/</i>
|
|
findParent : <b>function</b>(simpleSelector, maxDepth, returnEl){
|
|
<b>var</b> p = <b>this</b>.dom, b = document.body, depth = 0, dq = Ext.DomQuery, stopEl;
|
|
maxDepth = maxDepth || 50;
|
|
<b>if</b>(typeof maxDepth != "number"){
|
|
stopEl = Ext.getDom(maxDepth);
|
|
maxDepth = 10;
|
|
}
|
|
<b>while</b>(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
|
|
<b>if</b>(dq.is(p, simpleSelector)){
|
|
<b>return</b> returnEl ? Ext.get(p) : p;
|
|
}
|
|
depth++;
|
|
p = p.parentNode;
|
|
}
|
|
<b>return</b> null;
|
|
},
|
|
|
|
|
|
<i>/**
|
|
* Looks at parent nodes <b>for</b> a match of the passed simple selector (e.g. div.some-class or span:first-child)
|
|
* @param {String} ss The simple selector to test
|
|
* @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
|
|
search as a number or element (defaults to 10 || document.body)
|
|
* @param {Boolean} returnEl (optional) True to <b>return</b> a Ext.Element object instead of DOM node
|
|
* @<b>return</b> {HTMLElement}
|
|
*/</i>
|
|
findParentNode : <b>function</b>(simpleSelector, maxDepth, returnEl){
|
|
<b>var</b> p = Ext.fly(<b>this</b>.dom.parentNode, '_internal');
|
|
<b>return</b> p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
|
|
},
|
|
|
|
<i>/**
|
|
* Walks up the dom looking <b>for</b> a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
|
|
* This is a shortcut <b>for</b> findParentNode() that always returns an Ext.Element.
|
|
* @param {String} ss The simple selector to test
|
|
* @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
|
|
search as a number or element (defaults to 10 || document.body)
|
|
* @<b>return</b> {Ext.Element}
|
|
*/</i>
|
|
up : <b>function</b>(simpleSelector, maxDepth){
|
|
<b>return</b> this.findParentNode(simpleSelector, maxDepth, true);
|
|
},
|
|
|
|
|
|
|
|
<i>/**
|
|
* Returns true <b>if</b> this element matches the passed simple selector (e.g. div.some-class or span:first-child)
|
|
* @param {String} ss The simple selector to test
|
|
* @<b>return</b> {Boolean}
|
|
*/</i>
|
|
is : <b>function</b>(simpleSelector){
|
|
<b>return</b> Ext.DomQuery.is(<b>this</b>.dom, simpleSelector);
|
|
},
|
|
|
|
<i>/**
|
|
* Perform animation on <b>this</b> element.
|
|
* @param {Object} args The YUI animation control args
|
|
* @param {Float} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* @param {Function} onComplete (optional) Function to call when animation completes.
|
|
* @param {String} easing (optional) Easing method to use. (Defaults to 'easeOut')
|
|
* @param {String} animType (optional) 'run' is the <b>default</b>. Can be 'color', 'motion', or 'scroll'
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
animate : <b>function</b>(args, duration, onComplete, easing, animType){
|
|
<b>this</b>.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/*
|
|
* @private Internal animation call
|
|
*/</i>
|
|
anim : <b>function</b>(args, opt, animType, defaultDur, defaultEase, cb){
|
|
animType = animType || 'run';
|
|
opt = opt || {};
|
|
<b>var</b> anim = Ext.lib.Anim[animType](
|
|
<b>this</b>.dom, args,
|
|
(opt.duration || defaultDur) || .35,
|
|
(opt.easing || defaultEase) || 'easeOut',
|
|
<b>function</b>(){
|
|
Ext.callback(cb, <b>this</b>);
|
|
Ext.callback(opt.callback, opt.scope || <b>this</b>, [<b>this</b>, opt]);
|
|
},
|
|
<b>this</b>
|
|
);
|
|
opt.anim = anim;
|
|
<b>return</b> anim;
|
|
},
|
|
|
|
<i>// private legacy anim prep</i>
|
|
preanim : <b>function</b>(a, i){
|
|
<b>return</b> !a[i] ? false : (<b>typeof</b> a[i] == "object" ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
|
|
},
|
|
|
|
<i>/**
|
|
* Removes worthless text nodes
|
|
* @param {Boolean} forceReclean (optional) By <b>default</b> the element
|
|
* keeps track <b>if</b> it has been cleaned already so
|
|
* you can call <b>this</b> over and over. However, <b>if</b> you update the element and
|
|
* need to force a reclean, you can pass true.
|
|
*/</i>
|
|
clean : <b>function</b>(forceReclean){
|
|
<b>if</b>(this.isCleaned && forceReclean !== true){
|
|
<b>return</b> this;
|
|
}
|
|
<b>var</b> ns = /\S/;
|
|
<b>var</b> d = <b>this</b>.dom, n = d.firstChild, ni = -1;
|
|
<b>while</b>(n){
|
|
<b>var</b> nx = n.nextSibling;
|
|
<b>if</b>(n.nodeType == 3 && !ns.test(n.nodeValue)){
|
|
d.removeChild(n);
|
|
}<b>else</b>{
|
|
n.nodeIndex = ++ni;
|
|
}
|
|
n = nx;
|
|
}
|
|
<b>this</b>.isCleaned = true;
|
|
<b>return</b> this;
|
|
},
|
|
|
|
calcOffsetsTo : <b>function</b>(el){
|
|
el = Ext.get(el), d = el.dom;
|
|
<b>var</b> restorePos = false;
|
|
<b>if</b>(el.getStyle('position') == 'static'){
|
|
el.position('relative');
|
|
restorePos = true;
|
|
}
|
|
<b>var</b> x = 0, y =0;
|
|
<b>var</b> op = <b>this</b>.dom;
|
|
<b>while</b>(op && op != d && op.tagName != 'HTML'){
|
|
x+= op.offsetLeft;
|
|
y+= op.offsetTop;
|
|
op = op.offsetParent;
|
|
}
|
|
<b>if</b>(restorePos){
|
|
el.position('static');
|
|
}
|
|
<b>return</b> [x, y];
|
|
},
|
|
|
|
<i>/**
|
|
* Scrolls <b>this</b> element into view within the passed container.
|
|
* @param {String/HTMLElement/Element} container (optional) The container element to scroll (defaults to document.body)
|
|
* @param {Boolean} hscroll (optional) false to disable horizontal scroll
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
scrollIntoView : <b>function</b>(container, hscroll){
|
|
<b>var</b> c = Ext.getDom(container) || document.body;
|
|
<b>var</b> el = <b>this</b>.dom;
|
|
|
|
<b>var</b> o = <b>this</b>.calcOffsetsTo(c),
|
|
l = o[0],
|
|
t = o[1],
|
|
b = t+el.offsetHeight,
|
|
r = l+el.offsetWidth;
|
|
|
|
<b>var</b> ch = c.clientHeight;
|
|
<b>var</b> ct = parseInt(c.scrollTop, 10);
|
|
<b>var</b> cl = parseInt(c.scrollLeft, 10);
|
|
<b>var</b> cb = ct + ch;
|
|
<b>var</b> cr = cl + c.clientWidth;
|
|
|
|
<b>if</b>(t < ct){
|
|
c.scrollTop = t;
|
|
}<b>else</b> if(b > cb){
|
|
c.scrollTop = b-ch;
|
|
}
|
|
|
|
<b>if</b>(hscroll !== false){
|
|
<b>if</b>(l < cl){
|
|
c.scrollLeft = l;
|
|
}<b>else</b> if(r > cr){
|
|
c.scrollLeft = r-c.clientWidth;
|
|
}
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
scrollChildIntoView : <b>function</b>(child){
|
|
Ext.fly(child, '_scrollChildIntoView').scrollIntoView(<b>this</b>);
|
|
},
|
|
|
|
<i>/**
|
|
* Measures the elements content height and updates height to match. Note, <b>this</b> function uses setTimeout and
|
|
* the <b>new</b> height may not be available immediately.
|
|
* @param {Boolean} animate (optional) Animate the transition (Default is false)
|
|
* @param {Float} duration (optional) Length of the animation. (Defaults to .35 seconds)
|
|
* @param {Function} onComplete (optional) Function to call when animation completes.
|
|
* @param {String} easing (optional) Easing method to use.
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
autoHeight : <b>function</b>(animate, duration, onComplete, easing){
|
|
<b>var</b> oldHeight = <b>this</b>.getHeight();
|
|
<b>this</b>.clip();
|
|
<b>this</b>.setHeight(1); <i>// force clipping</i>
|
|
setTimeout(<b>function</b>(){
|
|
<b>var</b> height = parseInt(<b>this</b>.dom.scrollHeight, 10); <i>// parseInt <b>for</b> Safari</i>
|
|
<b>if</b>(!animate){
|
|
<b>this</b>.setHeight(height);
|
|
<b>this</b>.unclip();
|
|
<b>if</b>(typeof onComplete == "<b>function</b>"){
|
|
onComplete();
|
|
}
|
|
}<b>else</b>{
|
|
<b>this</b>.setHeight(oldHeight); <i>// restore original height</i>
|
|
<b>this</b>.setHeight(height, animate, duration, <b>function</b>(){
|
|
<b>this</b>.unclip();
|
|
<b>if</b>(typeof onComplete == "<b>function</b>") onComplete();
|
|
}.createDelegate(<b>this</b>), easing);
|
|
}
|
|
}.createDelegate(<b>this</b>), 0);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns true <b>if</b> this element is an ancestor of the passed element
|
|
* @param {HTMLElement/String} el
|
|
* @<b>return</b> {Boolean}
|
|
*/</i>
|
|
contains : <b>function</b>(el){
|
|
<b>if</b>(!el){<b>return</b> false;}
|
|
<b>return</b> D.isAncestor(<b>this</b>.dom, el.dom ? el.dom : el);
|
|
},
|
|
|
|
<i>/**
|
|
* Checks whether the element is currently visible using both visibility and display properties.
|
|
* @param {Boolean} deep True to walk the dom and see <b>if</b> parent elements are hidden.
|
|
* @<b>return</b> {Boolean} true <b>if</b> the element is currently visible
|
|
*/</i>
|
|
isVisible : <b>function</b>(deep) {
|
|
<b>var</b> vis = !(<b>this</b>.getStyle("visibility") == "hidden" || <b>this</b>.getStyle("display") == "none");
|
|
<b>if</b>(deep !== true || !vis){
|
|
<b>return</b> vis;
|
|
}
|
|
<b>var</b> p = <b>this</b>.dom.parentNode;
|
|
<b>while</b>(p && p.tagName.toLowerCase() != "body"){
|
|
<b>if</b>(!Ext.fly(p, '_isVisible').isVisible()){
|
|
<b>return</b> false;
|
|
}
|
|
p = p.parentNode;
|
|
}
|
|
<b>return</b> true;
|
|
},
|
|
|
|
<i>/**
|
|
* Creates a CompositeElement <b>for</b> child nodes based on the passed CSS selector (the selector should not contain an id)
|
|
* @param {String} selector The CSS selector
|
|
* @param {Boolean} unique true to create a unique Ext.Element <b>for</b> each child (defaults to a shared flyweight object)
|
|
* @<b>return</b> {CompositeElement/CompositeElementLite} The composite element
|
|
*/</i>
|
|
select : <b>function</b>(selector, unique){
|
|
<b>return</b> El.select("#" + Ext.id(<b>this</b>.dom) + " " + selector, unique);
|
|
},
|
|
|
|
<i>/**
|
|
* Selects child nodes based on the passed CSS selector (the selector should not contain an id)
|
|
* @param {String} selector The CSS selector
|
|
* @<b>return</b> {Array} An array of the matched nodes
|
|
*/</i>
|
|
query : <b>function</b>(selector, unique){
|
|
<b>return</b> Ext.DomQuery.select("#" + Ext.id(<b>this</b>.dom) + " " + selector);
|
|
},
|
|
|
|
<i>/**
|
|
* Selects a single child based on the passed CSS selector (the selector should not contain an id)
|
|
* @param {String} selector The CSS selector
|
|
* @param {Boolean} returnDom true to <b>return</b> the DOM node instead of Ext.Element
|
|
* @<b>return</b> {Element} The element
|
|
*/</i>
|
|
child : <b>function</b>(selector, returnDom){
|
|
<b>var</b> n = Ext.DomQuery.selectNode("#" + Ext.id(<b>this</b>.dom) + " " + selector);
|
|
<b>return</b> returnDom ? n : Ext.get(n);
|
|
},
|
|
|
|
<i>/**
|
|
* Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id)
|
|
* @param {String} selector The CSS selector
|
|
* @param {Boolean} returnDom true to <b>return</b> the DOM node instead of Ext.Element
|
|
* @<b>return</b> {Element} The element
|
|
*/</i>
|
|
down : <b>function</b>(selector, returnDom){
|
|
<b>var</b> n = Ext.DomQuery.selectNode("#" + Ext.id(<b>this</b>.dom) + " > " + selector);
|
|
<b>return</b> returnDom ? n : Ext.get(n);
|
|
},
|
|
|
|
<i>/**
|
|
* Initializes a Ext.dd.DD object <b>for</b> this element.
|
|
* @param {String} group The group the DD object is member of
|
|
* @param {Object} config The DD config object
|
|
* @param {Object} overrides An object containing methods to override/implement on the DD object
|
|
* @<b>return</b> {Ext.dd.DD} The DD object
|
|
*/</i>
|
|
initDD : <b>function</b>(group, config, overrides){
|
|
<b>var</b> dd = <b>new</b> Ext.dd.DD(Ext.id(<b>this</b>.dom), group, config);
|
|
<b>return</b> Ext.apply(dd, overrides);
|
|
},
|
|
|
|
<i>/**
|
|
* Initializes a Ext.dd.DDProxy object <b>for</b> this element.
|
|
* @param {String} group The group the DDProxy object is member of
|
|
* @param {Object} config The DDProxy config object
|
|
* @param {Object} overrides An object containing methods to override/implement on the DDProxy object
|
|
* @<b>return</b> {Ext.dd.DDProxy} The DDProxy object
|
|
*/</i>
|
|
initDDProxy : <b>function</b>(group, config, overrides){
|
|
<b>var</b> dd = <b>new</b> Ext.dd.DDProxy(Ext.id(<b>this</b>.dom), group, config);
|
|
<b>return</b> Ext.apply(dd, overrides);
|
|
},
|
|
|
|
<i>/**
|
|
* Initializes a Ext.dd.DDTarget object <b>for</b> this element.
|
|
* @param {String} group The group the DDTarget object is member of
|
|
* @param {Object} config The DDTarget config object
|
|
* @param {Object} overrides An object containing methods to override/implement on the DDTarget object
|
|
* @<b>return</b> {Ext.dd.DDTarget} The DDTarget object
|
|
*/</i>
|
|
initDDTarget : <b>function</b>(group, config, overrides){
|
|
<b>var</b> dd = <b>new</b> Ext.dd.DDTarget(Ext.id(<b>this</b>.dom), group, config);
|
|
<b>return</b> Ext.apply(dd, overrides);
|
|
},
|
|
|
|
<i>/**
|
|
* Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
|
|
* the display property to hide the element, otherwise it uses visibility. The <b>default</b> is to hide and show using the visibility property.
|
|
* @param {Boolean} visible Whether the element is visible
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setVisible : <b>function</b>(visible, animate){
|
|
<b>if</b>(!animate || !A){
|
|
<b>if</b>(this.visibilityMode == El.DISPLAY){
|
|
<b>this</b>.setDisplayed(visible);
|
|
}<b>else</b>{
|
|
<b>this</b>.fixDisplay();
|
|
<b>this</b>.dom.style.visibility = visible ? "visible" : "hidden";
|
|
}
|
|
}<b>else</b>{
|
|
<i>// closure <b>for</b> composites</i>
|
|
<b>var</b> dom = <b>this</b>.dom;
|
|
<b>var</b> visMode = <b>this</b>.visibilityMode;
|
|
<b>if</b>(visible){
|
|
<b>this</b>.setOpacity(.01);
|
|
<b>this</b>.setVisible(true);
|
|
}
|
|
<b>this</b>.anim({opacity: { to: (visible?1:0) }},
|
|
<b>this</b>.preanim(arguments, 1),
|
|
null, .35, 'easeIn', <b>function</b>(){
|
|
<b>if</b>(!visible){
|
|
<b>if</b>(visMode == El.DISPLAY){
|
|
dom.style.display = "none";
|
|
}<b>else</b>{
|
|
dom.style.visibility = "hidden";
|
|
}
|
|
Ext.get(dom).setOpacity(1);
|
|
}
|
|
});
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns true <b>if</b> display is not "none"
|
|
* @<b>return</b> {Boolean}
|
|
*/</i>
|
|
isDisplayed : <b>function</b>() {
|
|
<b>return</b> this.getStyle("display") != "none";
|
|
},
|
|
|
|
<i>/**
|
|
* Toggles the elements visibility or display, depending on visibility mode.
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
toggle : <b>function</b>(animate){
|
|
<b>this</b>.setVisible(!<b>this</b>.isVisible(), <b>this</b>.preanim(arguments, 0));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Sets the css display. Uses originalDisplay <b>if</b> value is a boolean true.
|
|
* @param {Boolean} value Boolean to display the element using its <b>default</b> display or a string to set the display directly
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setDisplayed : <b>function</b>(value) {
|
|
<b>if</b>(typeof value == "boolean"){
|
|
value = value ? <b>this</b>.originalDisplay : "none";
|
|
}
|
|
<b>this</b>.setStyle("display", value);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Tries to focus the element. Any exceptions are caught.
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
focus : <b>function</b>() {
|
|
try{
|
|
<b>this</b>.dom.focus();
|
|
}catch(e){}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Tries to blur the element. Any exceptions are caught.
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
blur : <b>function</b>() {
|
|
try{
|
|
<b>this</b>.dom.blur();
|
|
}catch(e){}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Add a CSS class to the element.
|
|
* @param {String/Array} className The CSS class to add or an array of classes
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
addClass : <b>function</b>(className){
|
|
<b>if</b>(className instanceof Array){
|
|
<b>for</b>(var i = 0, len = className.length; i < len; i++) {
|
|
<b>this</b>.addClass(className[i]);
|
|
}
|
|
}<b>else</b>{
|
|
<b>if</b>(className && !<b>this</b>.hasClass(className)){
|
|
<b>this</b>.dom.className = <b>this</b>.dom.className + " " + className;
|
|
}
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Adds the passed className to <b>this</b> element and removes the class from all siblings
|
|
* @param {String} className The className to add
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
radioClass : <b>function</b>(className){
|
|
<b>var</b> siblings = <b>this</b>.dom.parentNode.childNodes;
|
|
<b>for</b>(var i = 0; i < siblings.length; i++) {
|
|
<b>var</b> s = siblings[i];
|
|
<b>if</b>(s.nodeType == 1){
|
|
Ext.get(s).removeClass(className);
|
|
}
|
|
}
|
|
<b>this</b>.addClass(className);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Removes a CSS class from the element.
|
|
* @param {String/Array} className The CSS class to remove or an array of classes
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
removeClass : <b>function</b>(className){
|
|
<b>if</b>(!className || !<b>this</b>.dom.className){
|
|
<b>return</b> this;
|
|
}
|
|
<b>if</b>(className instanceof Array){
|
|
<b>for</b>(var i = 0, len = className.length; i < len; i++) {
|
|
<b>this</b>.removeClass(className[i]);
|
|
}
|
|
}<b>else</b>{
|
|
<b>if</b>(this.hasClass(className)){
|
|
<b>var</b> re = <b>this</b>.classReCache[className];
|
|
<b>if</b> (!re) {
|
|
re = <b>new</b> RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
|
|
<b>this</b>.classReCache[className] = re;
|
|
}
|
|
<b>this</b>.dom.className =
|
|
<b>this</b>.dom.className.replace(re, " ");
|
|
}
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
classReCache: {},
|
|
|
|
<i>/**
|
|
* Toggles (adds or removes) the passed class.
|
|
* @param {String} className
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
toggleClass : <b>function</b>(className){
|
|
<b>if</b>(this.hasClass(className)){
|
|
<b>this</b>.removeClass(className);
|
|
}<b>else</b>{
|
|
<b>this</b>.addClass(className);
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Checks <b>if</b> a CSS class is <b>in</b> use by the element.
|
|
* @param {String} className The CSS class to check
|
|
* @<b>return</b> {Boolean} true or false
|
|
*/</i>
|
|
hasClass : <b>function</b>(className){
|
|
<b>return</b> className && (' '+<b>this</b>.dom.className+' ').indexOf(' '+className+' ') != -1;
|
|
},
|
|
|
|
<i>/**
|
|
* Replaces a CSS class on the element <b>with</b> another.
|
|
* @param {String} oldClassName The CSS class to replace
|
|
* @param {String} newClassName The replacement CSS class
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
replaceClass : <b>function</b>(oldClassName, newClassName){
|
|
<b>this</b>.removeClass(oldClassName);
|
|
<b>this</b>.addClass(newClassName);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Get an object <b>with</b> properties matching the styles requested.
|
|
* e.g. el.getStyles('color', 'font-size', 'width') might <b>return</b>
|
|
* {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
|
|
* @param {String} style1
|
|
* @param {String} style2
|
|
* @param {String} etc
|
|
* @<b>return</b> Object
|
|
*/</i>
|
|
getStyles : <b>function</b>(){
|
|
<b>var</b> a = arguments, len = a.length, r = {};
|
|
<b>for</b>(var i = 0; i < len; i++){
|
|
r[a[i]] = <b>this</b>.getStyle(a[i]);
|
|
}
|
|
<b>return</b> r;
|
|
},
|
|
|
|
<i>/**
|
|
* Normalizes currentStyle and computedStyle. This is not YUI getStyle, it is an optimised version.
|
|
* @param {String} property The style property whose value is returned.
|
|
* @<b>return</b> {String} The current value of the style property <b>for</b> this element.
|
|
*/</i>
|
|
getStyle : <b>function</b>(){
|
|
<b>return</b> view && view.getComputedStyle ?
|
|
<b>function</b>(prop){
|
|
<b>var</b> el = <b>this</b>.dom, v, cs, camel;
|
|
<b>if</b>(prop == 'float'){
|
|
prop = "cssFloat";
|
|
}
|
|
<b>if</b>(v = el.style[prop]){
|
|
<b>return</b> v;
|
|
}
|
|
<b>if</b>(cs = view.getComputedStyle(el, "")){
|
|
<b>if</b>(!(camel = propCache[prop])){
|
|
camel = propCache[prop] = prop.replace(camelRe, camelFn);
|
|
}
|
|
<b>return</b> cs[camel];
|
|
}
|
|
<b>return</b> null;
|
|
} :
|
|
<b>function</b>(prop){
|
|
<b>var</b> el = <b>this</b>.dom, v, cs, camel;
|
|
<b>if</b>(prop == 'opacity'){
|
|
<b>if</b>(typeof el.filter == 'string'){
|
|
<b>var</b> fv = parseFloat(el.filter.match(/alpha\(opacity=(.*)\)/i)[1]);
|
|
<b>if</b>(!isNaN(fv)){
|
|
<b>return</b> fv ? fv / 100 : 0;
|
|
}
|
|
}
|
|
<b>return</b> 1;
|
|
}<b>else</b> if(prop == 'float'){
|
|
prop = "styleFloat";
|
|
}
|
|
<b>if</b>(!(camel = propCache[prop])){
|
|
camel = propCache[prop] = prop.replace(camelRe, camelFn);
|
|
}
|
|
<b>if</b>(v = el.style[camel]){
|
|
<b>return</b> v;
|
|
}
|
|
<b>if</b>(cs = el.currentStyle){
|
|
<b>return</b> cs[camel];
|
|
}
|
|
<b>return</b> null;
|
|
};
|
|
}(),
|
|
|
|
<i>/**
|
|
* Wrapper <b>for</b> setting style properties, also takes single object parameter of multiple styles
|
|
* @param {String/Object} property The style property to be set or an object of multiple styles.
|
|
* @param {String} val (optional) The value to apply to the given property or null <b>if</b> an object was passed.
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setStyle : <b>function</b>(prop, value){
|
|
<b>if</b>(typeof prop == "string"){
|
|
<b>var</b> camel;
|
|
<b>if</b>(!(camel = propCache[prop])){
|
|
camel = propCache[prop] = prop.replace(camelRe, camelFn);
|
|
}
|
|
<b>if</b>(camel == 'opacity') {
|
|
<b>this</b>.setOpacity(value);
|
|
}<b>else</b>{
|
|
<b>this</b>.dom.style[camel] = value;
|
|
}
|
|
}<b>else</b>{
|
|
<b>for</b>(var style <b>in</b> prop){
|
|
<b>if</b>(typeof prop[style] != "<b>function</b>"){
|
|
<b>this</b>.setStyle(style, prop[style]);
|
|
}
|
|
}
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* More flexible version of {@link #setStyle} <b>for</b> setting style properties.
|
|
* @param {String/Object/Function} styles A style specification string eg "width:100px", or object <b>in</b> the form {width:"100px"}, or
|
|
* a <b>function</b> which returns such a specification.
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
applyStyles : <b>function</b>(style){
|
|
Ext.DomHelper.applyStyles(<b>this</b>.dom, style);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the current X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended <b>return</b> false).
|
|
@<b>return</b> {Number} The X position of the element
|
|
*/</i>
|
|
getX : <b>function</b>(){
|
|
<b>return</b> D.getX(<b>this</b>.dom);
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended <b>return</b> false).
|
|
@<b>return</b> {Number} The Y position of the element
|
|
*/</i>
|
|
getY : <b>function</b>(){
|
|
<b>return</b> D.getY(<b>this</b>.dom);
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended <b>return</b> false).
|
|
@<b>return</b> {Array} The XY position of the element
|
|
*/</i>
|
|
getXY : <b>function</b>(){
|
|
<b>return</b> D.getXY(<b>this</b>.dom);
|
|
},
|
|
|
|
<i>/**
|
|
* Sets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended <b>return</b> false).
|
|
@param {Number} The X position of the element
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setX : <b>function</b>(x, animate){
|
|
<b>if</b>(!animate || !A){
|
|
D.setX(<b>this</b>.dom, x);
|
|
}<b>else</b>{
|
|
<b>this</b>.setXY([x, <b>this</b>.getY()], <b>this</b>.preanim(arguments, 1));
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended <b>return</b> false).
|
|
@param {Number} The Y position of the element
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setY : <b>function</b>(y, animate){
|
|
<b>if</b>(!animate || !A){
|
|
D.setY(<b>this</b>.dom, y);
|
|
}<b>else</b>{
|
|
<b>this</b>.setXY([<b>this</b>.getX(), y], <b>this</b>.preanim(arguments, 1));
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Set the element's left position directly using CSS style (instead of setX())
|
|
* @param {String} left The left CSS property value
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setLeft : <b>function</b>(left){
|
|
<b>this</b>.setStyle("left", <b>this</b>.addUnits(left));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Set the element's top position directly using CSS style (instead of setY())
|
|
* @param {String} top The top CSS property value
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setTop : <b>function</b>(top){
|
|
<b>this</b>.setStyle("top", <b>this</b>.addUnits(top));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Set the element's css right style
|
|
* @param {String} right The right CSS property value
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setRight : <b>function</b>(right){
|
|
<b>this</b>.setStyle("right", <b>this</b>.addUnits(right));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Set the element's css bottom style
|
|
* @param {String} bottom The bottom CSS property value
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setBottom : <b>function</b>(bottom){
|
|
<b>this</b>.setStyle("bottom", <b>this</b>.addUnits(bottom));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Set the position of the element <b>in</b> page coordinates, regardless of how the element is positioned.
|
|
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended <b>return</b> false).
|
|
* @param {Array} pos Contains X & Y [x, y] values <b>for</b> new position (coordinates are page-based)
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setXY : <b>function</b>(pos, animate){
|
|
<b>if</b>(!animate || !A){
|
|
D.setXY(<b>this</b>.dom, pos);
|
|
}<b>else</b>{
|
|
<b>this</b>.anim({points: {to: pos}}, <b>this</b>.preanim(arguments, 1), 'motion');
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Set the position of the element <b>in</b> page coordinates, regardless of how the element is positioned.
|
|
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended <b>return</b> false).
|
|
* @param {Number} x X value <b>for</b> new position (coordinates are page-based)
|
|
* @param {Number} y Y value <b>for</b> new position (coordinates are page-based)
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setLocation : <b>function</b>(x, y, animate){
|
|
<b>this</b>.setXY([x, y], <b>this</b>.preanim(arguments, 2));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Set the position of the element <b>in</b> page coordinates, regardless of how the element is positioned.
|
|
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended <b>return</b> false).
|
|
* @param {Number} x X value <b>for</b> new position (coordinates are page-based)
|
|
* @param {Number} y Y value <b>for</b> new position (coordinates are page-based)
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
moveTo : <b>function</b>(x, y, animate){
|
|
<b>this</b>.setXY([x, y], <b>this</b>.preanim(arguments, 2));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the region of the given element.
|
|
* The element must be part of the DOM tree to have a region (display:none or elements not appended <b>return</b> false).
|
|
* @<b>return</b> {Region} A Ext.lib.Region containing "top, left, bottom, right" member data.
|
|
*/</i>
|
|
getRegion : <b>function</b>(){
|
|
<b>return</b> D.getRegion(<b>this</b>.dom);
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the offset height of the element
|
|
* @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
|
|
* @<b>return</b> {Number} The element's height
|
|
*/</i>
|
|
getHeight : <b>function</b>(contentHeight){
|
|
<b>var</b> h = <b>this</b>.dom.offsetHeight || 0;
|
|
<b>return</b> contentHeight !== true ? h : h-<b>this</b>.getBorderWidth("tb")-<b>this</b>.getPadding("tb");
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the offset width of the element
|
|
* @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
|
|
* @<b>return</b> {Number} The element's width
|
|
*/</i>
|
|
getWidth : <b>function</b>(contentWidth){
|
|
<b>var</b> w = <b>this</b>.dom.offsetWidth || 0;
|
|
<b>return</b> contentWidth !== true ? w : w-<b>this</b>.getBorderWidth("lr")-<b>this</b>.getPadding("lr");
|
|
},
|
|
|
|
<i>/**
|
|
* Returns either the offsetHeight or the height of <b>this</b> element based on CSS height adjusted by padding or borders
|
|
* when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
|
|
* <b>if</b> a height has not been set using CSS.
|
|
* @<b>return</b> {Number}
|
|
*/</i>
|
|
getComputedHeight : <b>function</b>(){
|
|
<b>var</b> h = Math.max(<b>this</b>.dom.offsetHeight, <b>this</b>.dom.clientHeight);
|
|
<b>if</b>(!h){
|
|
h = parseInt(<b>this</b>.getStyle('height'), 10) || 0;
|
|
<b>if</b>(!<b>this</b>.isBorderBox()){
|
|
h += <b>this</b>.getFrameWidth('tb');
|
|
}
|
|
}
|
|
<b>return</b> h;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns either the offsetWidth or the width of <b>this</b> element based on CSS width adjusted by padding or borders
|
|
* when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
|
|
* <b>if</b> a width has not been set using CSS.
|
|
* @<b>return</b> {Number}
|
|
*/</i>
|
|
getComputedWidth : <b>function</b>(){
|
|
<b>var</b> w = Math.max(<b>this</b>.dom.offsetWidth, <b>this</b>.dom.clientWidth);
|
|
<b>if</b>(!w){
|
|
w = parseInt(<b>this</b>.getStyle('width'), 10) || 0;
|
|
<b>if</b>(!<b>this</b>.isBorderBox()){
|
|
w += <b>this</b>.getFrameWidth('lr');
|
|
}
|
|
}
|
|
<b>return</b> w;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the size of the element
|
|
* @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
|
|
* @<b>return</b> {Object} An object containing the element's size {width: (element width), height: (element height)}
|
|
*/</i>
|
|
getSize : <b>function</b>(contentSize){
|
|
<b>return</b> {width: <b>this</b>.getWidth(contentSize), height: <b>this</b>.getHeight(contentSize)};
|
|
},
|
|
|
|
getViewSize : <b>function</b>(){
|
|
<b>var</b> d = <b>this</b>.dom, doc = document, aw = 0, ah = 0;
|
|
<b>if</b>(d == doc || d == doc.body){
|
|
<b>return</b> {width : D.getViewWidth(), height: D.getViewHeight()};
|
|
}<b>else</b>{
|
|
<b>return</b> {
|
|
width : d.clientWidth,
|
|
height: d.clientHeight
|
|
};
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the value of the "value" attribute
|
|
* @param {Boolean} asNumber true to parse the value as a number
|
|
* @<b>return</b> {String/Number}
|
|
*/</i>
|
|
getValue : <b>function</b>(asNumber){
|
|
<b>return</b> asNumber ? parseInt(<b>this</b>.dom.value, 10) : <b>this</b>.dom.value;
|
|
},
|
|
|
|
<i>/** @private */</i>
|
|
adjustWidth : <b>function</b>(width){
|
|
<b>if</b>(typeof width == "number"){
|
|
<b>if</b>(this.autoBoxAdjust && !<b>this</b>.isBorderBox()){
|
|
width -= (<b>this</b>.getBorderWidth("lr") + <b>this</b>.getPadding("lr"));
|
|
}
|
|
<b>if</b>(width < 0){
|
|
width = 0;
|
|
}
|
|
}
|
|
<b>return</b> width;
|
|
},
|
|
|
|
<i>/** @private */</i>
|
|
adjustHeight : <b>function</b>(height){
|
|
<b>if</b>(typeof height == "number"){
|
|
<b>if</b>(this.autoBoxAdjust && !<b>this</b>.isBorderBox()){
|
|
height -= (<b>this</b>.getBorderWidth("tb") + <b>this</b>.getPadding("tb"));
|
|
}
|
|
<b>if</b>(height < 0){
|
|
height = 0;
|
|
}
|
|
}
|
|
<b>return</b> height;
|
|
},
|
|
|
|
<i>/**
|
|
* Set the width of the element
|
|
* @param {Number} width The <b>new</b> width
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setWidth : <b>function</b>(width, animate){
|
|
width = <b>this</b>.adjustWidth(width);
|
|
<b>if</b>(!animate || !A){
|
|
<b>this</b>.dom.style.width = <b>this</b>.addUnits(width);
|
|
}<b>else</b>{
|
|
<b>this</b>.anim({width: {to: width}}, <b>this</b>.preanim(arguments, 1));
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Set the height of the element
|
|
* @param {Number} height The <b>new</b> height
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setHeight : <b>function</b>(height, animate){
|
|
height = <b>this</b>.adjustHeight(height);
|
|
<b>if</b>(!animate || !A){
|
|
<b>this</b>.dom.style.height = <b>this</b>.addUnits(height);
|
|
}<b>else</b>{
|
|
<b>this</b>.anim({height: {to: height}}, <b>this</b>.preanim(arguments, 1));
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Set the size of the element. If animation is true, both width an height will be animated concurrently.
|
|
* @param {Number} width The <b>new</b> width
|
|
* @param {Number} height The <b>new</b> height
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setSize : <b>function</b>(width, height, animate){
|
|
<b>if</b>(typeof width == "object"){ <i>// <b>in</b> case of object from getSize()</i>
|
|
height = width.height; width = width.width;
|
|
}
|
|
width = <b>this</b>.adjustWidth(width); height = <b>this</b>.adjustHeight(height);
|
|
<b>if</b>(!animate || !A){
|
|
<b>this</b>.dom.style.width = <b>this</b>.addUnits(width);
|
|
<b>this</b>.dom.style.height = <b>this</b>.addUnits(height);
|
|
}<b>else</b>{
|
|
<b>this</b>.anim({width: {to: width}, height: {to: height}}, <b>this</b>.preanim(arguments, 2));
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Sets the element's position and size <b>in</b> one shot. If animation is true then width, height, x and y will be animated concurrently.
|
|
* @param {Number} x X value <b>for</b> new position (coordinates are page-based)
|
|
* @param {Number} y Y value <b>for</b> new position (coordinates are page-based)
|
|
* @param {Number} width The <b>new</b> width
|
|
* @param {Number} height The <b>new</b> height
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setBounds : <b>function</b>(x, y, width, height, animate){
|
|
<b>if</b>(!animate || !A){
|
|
<b>this</b>.setSize(width, height);
|
|
<b>this</b>.setLocation(x, y);
|
|
}<b>else</b>{
|
|
width = <b>this</b>.adjustWidth(width); height = <b>this</b>.adjustHeight(height);
|
|
<b>this</b>.anim({points: {to: [x, y]}, width: {to: width}, height: {to: height}},
|
|
<b>this</b>.preanim(arguments, 4), 'motion');
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Sets the element's position and size the the specified region. If animation is true then width, height, x and y will be animated concurrently.
|
|
* @param {Ext.lib.Region} region The region to fill
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setRegion : <b>function</b>(region, animate){
|
|
<b>this</b>.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, <b>this</b>.preanim(arguments, 1));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Appends an event handler
|
|
*
|
|
* @param {String} eventName The type of event to append
|
|
* @param {Function} fn The method the event invokes
|
|
* @param {Object} scope (optional) The scope (<b>this</b> object) of the fn
|
|
* @param {Object} options (optional)An object <b>with</b> standard EventManager options
|
|
*/</i>
|
|
addListener : <b>function</b>(eventName, fn, scope, options){
|
|
Ext.EventManager.on(<b>this</b>.dom, eventName, fn, scope || <b>this</b>, options);
|
|
},
|
|
|
|
<i>/**
|
|
* Removes an event handler from <b>this</b> element
|
|
* @param {String} eventName the type of event to remove
|
|
* @param {Function} fn the method the event invokes
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
removeListener : <b>function</b>(eventName, fn){
|
|
Ext.EventManager.removeListener(<b>this</b>.dom, eventName, fn);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Removes all previous added listeners from <b>this</b> element
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
removeAllListeners : <b>function</b>(){
|
|
E.purgeElement(<b>this</b>.dom);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
relayEvent : <b>function</b>(eventName, observable){
|
|
<b>this</b>.on(eventName, <b>function</b>(e){
|
|
observable.fireEvent(eventName, e);
|
|
});
|
|
},
|
|
|
|
<i>/**
|
|
* Set the opacity of the element
|
|
* @param {Float} opacity The <b>new</b> opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setOpacity : <b>function</b>(opacity, animate){
|
|
<b>if</b>(!animate || !A){
|
|
<b>var</b> s = <b>this</b>.dom.style;
|
|
<b>if</b>(Ext.isIE){
|
|
s.zoom = 1;
|
|
s.filter = (s.filter || '').replace(/alpha\([^\)]*\)/gi,"") +
|
|
(opacity == 1 ? "" : "alpha(opacity=" + opacity * 100 + ")");
|
|
}<b>else</b>{
|
|
s.opacity = opacity;
|
|
}
|
|
}<b>else</b>{
|
|
<b>this</b>.anim({opacity: {to: opacity}}, <b>this</b>.preanim(arguments, 1), null, .35, 'easeIn');
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the left X coordinate
|
|
* @param {Boolean} local True to get the local css position instead of page coordinate
|
|
* @<b>return</b> {Number}
|
|
*/</i>
|
|
getLeft : <b>function</b>(local){
|
|
<b>if</b>(!local){
|
|
<b>return</b> this.getX();
|
|
}<b>else</b>{
|
|
<b>return</b> parseInt(<b>this</b>.getStyle("left"), 10) || 0;
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the right X coordinate of the element (element X position + element width)
|
|
* @param {Boolean} local True to get the local css position instead of page coordinate
|
|
* @<b>return</b> {Number}
|
|
*/</i>
|
|
getRight : <b>function</b>(local){
|
|
<b>if</b>(!local){
|
|
<b>return</b> this.getX() + <b>this</b>.getWidth();
|
|
}<b>else</b>{
|
|
<b>return</b> (<b>this</b>.getLeft(true) + <b>this</b>.getWidth()) || 0;
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the top Y coordinate
|
|
* @param {Boolean} local True to get the local css position instead of page coordinate
|
|
* @<b>return</b> {Number}
|
|
*/</i>
|
|
getTop : <b>function</b>(local) {
|
|
<b>if</b>(!local){
|
|
<b>return</b> this.getY();
|
|
}<b>else</b>{
|
|
<b>return</b> parseInt(<b>this</b>.getStyle("top"), 10) || 0;
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the bottom Y coordinate of the element (element Y position + element height)
|
|
* @param {Boolean} local True to get the local css position instead of page coordinate
|
|
* @<b>return</b> {Number}
|
|
*/</i>
|
|
getBottom : <b>function</b>(local){
|
|
<b>if</b>(!local){
|
|
<b>return</b> this.getY() + <b>this</b>.getHeight();
|
|
}<b>else</b>{
|
|
<b>return</b> (<b>this</b>.getTop(true) + <b>this</b>.getHeight()) || 0;
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Initializes positioning on <b>this</b> element. If a desired position is not passed, it will make the
|
|
* the element positioned relative IF it is not already positioned.
|
|
* @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"
|
|
* @param {Number} zIndex (optional) The zIndex to apply
|
|
* @param {Number} x (optional) Set the page X position
|
|
* @param {Number} y (optional) Set the page Y position
|
|
*/</i>
|
|
position : <b>function</b>(pos, zIndex, x, y){
|
|
<b>if</b>(!pos){
|
|
<b>if</b>(this.getStyle('position') == 'static'){
|
|
<b>this</b>.setStyle('position', 'relative');
|
|
}
|
|
}<b>else</b>{
|
|
<b>this</b>.setStyle("position", pos);
|
|
}
|
|
<b>if</b>(zIndex){
|
|
<b>this</b>.setStyle("z-index", zIndex);
|
|
}
|
|
<b>if</b>(x !== undefined && y !== undefined){
|
|
<b>this</b>.setXY([x, y]);
|
|
}<b>else</b> if(x !== undefined){
|
|
<b>this</b>.setX(x);
|
|
}<b>else</b> if(y !== undefined){
|
|
<b>this</b>.setY(y);
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Clear positioning back to the <b>default</b> when the document was loaded
|
|
* @param {String} value (optional) The value to use <b>for</b> the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
clearPositioning : <b>function</b>(value){
|
|
value = value ||'';
|
|
<b>this</b>.setStyle({
|
|
"left": value,
|
|
"right": value,
|
|
"top": value,
|
|
"bottom": value,
|
|
"z-index": "",
|
|
"position" : "static"
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Gets an object <b>with</b> all CSS positioning properties. Useful along <b>with</b> setPostioning to get
|
|
* snapshot before performing an update and then restoring the element.
|
|
* @<b>return</b> {Object}
|
|
*/</i>
|
|
getPositioning : <b>function</b>(){
|
|
<b>var</b> l = <b>this</b>.getStyle("left");
|
|
<b>var</b> t = <b>this</b>.getStyle("top");
|
|
<b>return</b> {
|
|
"position" : <b>this</b>.getStyle("position"),
|
|
"left" : l,
|
|
"right" : l ? "" : <b>this</b>.getStyle("right"),
|
|
"top" : t,
|
|
"bottom" : t ? "" : <b>this</b>.getStyle("bottom"),
|
|
"z-index" : <b>this</b>.getStyle("z-index")
|
|
};
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the width of the border(s) <b>for</b> the specified side(s)
|
|
* @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
|
|
* passing lr would get the border (l)eft width + the border (r)ight width.
|
|
* @<b>return</b> {Number} The width of the sides passed added together
|
|
*/</i>
|
|
getBorderWidth : <b>function</b>(side){
|
|
<b>return</b> this.addStyles(side, El.borders);
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the width of the padding(s) <b>for</b> the specified side(s)
|
|
* @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
|
|
* passing lr would get the padding (l)eft + the padding (r)ight.
|
|
* @<b>return</b> {Number} The padding of the sides passed added together
|
|
*/</i>
|
|
getPadding : <b>function</b>(side){
|
|
<b>return</b> this.addStyles(side, El.paddings);
|
|
},
|
|
|
|
<i>/**
|
|
* Set positioning <b>with</b> an object returned by getPositioning().
|
|
* @param {Object} posCfg
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setPositioning : <b>function</b>(pc){
|
|
<b>this</b>.applyStyles(pc);
|
|
<b>if</b>(pc.right == "auto"){
|
|
<b>this</b>.dom.style.right = "";
|
|
}
|
|
<b>if</b>(pc.bottom == "auto"){
|
|
<b>this</b>.dom.style.bottom = "";
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
fixDisplay : <b>function</b>(){
|
|
<b>if</b>(this.getStyle("display") == "none"){
|
|
<b>this</b>.setStyle("visibility", "hidden");
|
|
<b>this</b>.setStyle("display", <b>this</b>.originalDisplay); <i>// first try reverting to <b>default</b></i>
|
|
<b>if</b>(this.getStyle("display") == "none"){ <i>// <b>if</b> that fails, <b>default</b> to block</i>
|
|
<b>this</b>.setStyle("display", "block");
|
|
}
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Quick set left and top adding <b>default</b> units
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setLeftTop : <b>function</b>(left, top){
|
|
<b>this</b>.dom.style.left = <b>this</b>.addUnits(left);
|
|
<b>this</b>.dom.style.top = <b>this</b>.addUnits(top);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Move <b>this</b> element relative to its current position.
|
|
* @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
|
|
* @param {Number} distance How far to move the element <b>in</b> pixels
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
move : <b>function</b>(direction, distance, animate){
|
|
<b>var</b> xy = <b>this</b>.getXY();
|
|
direction = direction.toLowerCase();
|
|
<b>switch</b>(direction){
|
|
<b>case</b> "l":
|
|
<b>case</b> "left":
|
|
<b>this</b>.moveTo(xy[0]-distance, xy[1], <b>this</b>.preanim(arguments, 2));
|
|
<b>break</b>;
|
|
<b>case</b> "r":
|
|
<b>case</b> "right":
|
|
<b>this</b>.moveTo(xy[0]+distance, xy[1], <b>this</b>.preanim(arguments, 2));
|
|
<b>break</b>;
|
|
<b>case</b> "t":
|
|
<b>case</b> "top":
|
|
<b>case</b> "up":
|
|
<b>this</b>.moveTo(xy[0], xy[1]-distance, <b>this</b>.preanim(arguments, 2));
|
|
<b>break</b>;
|
|
<b>case</b> "b":
|
|
<b>case</b> "bottom":
|
|
<b>case</b> "down":
|
|
<b>this</b>.moveTo(xy[0], xy[1]+distance, <b>this</b>.preanim(arguments, 2));
|
|
<b>break</b>;
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
clip : <b>function</b>(){
|
|
<b>if</b>(!<b>this</b>.isClipped){
|
|
<b>this</b>.isClipped = true;
|
|
<b>this</b>.originalClip = {
|
|
"o": <b>this</b>.getStyle("overflow"),
|
|
"x": <b>this</b>.getStyle("overflow-x"),
|
|
"y": <b>this</b>.getStyle("overflow-y")
|
|
};
|
|
<b>this</b>.setStyle("overflow", "hidden");
|
|
<b>this</b>.setStyle("overflow-x", "hidden");
|
|
<b>this</b>.setStyle("overflow-y", "hidden");
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Return clipping (overflow) to original clipping before clip() was called
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
unclip : <b>function</b>(){
|
|
<b>if</b>(this.isClipped){
|
|
<b>this</b>.isClipped = false;
|
|
<b>var</b> o = <b>this</b>.originalClip;
|
|
<b>if</b>(o.o){<b>this</b>.setStyle("overflow", o.o);}
|
|
<b>if</b>(o.x){<b>this</b>.setStyle("overflow-x", o.x);}
|
|
<b>if</b>(o.y){<b>this</b>.setStyle("overflow-y", o.y);}
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
|
|
<i>/**
|
|
* Gets the x,y coordinates specified by the anchor position on the element.
|
|
* @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo} <b>for</b> details on supported anchor positions.
|
|
* @param {Object} size (optional) An object containing the size to use <b>for</b> calculating anchor position
|
|
* {width: (target width), height: (target height)} (defaults to the element's current size)
|
|
* @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead of page coordinates
|
|
* @<b>return</b> {Array} [x, y] An array containing the element's x and y coordinates
|
|
*/</i>
|
|
getAnchorXY : <b>function</b>(anchor, local, s){
|
|
<i>//Passing a different size is useful <b>for</b> pre-calculating anchors,</i>
|
|
<i>//especially <b>for</b> anchored animations that change the el size.</i>
|
|
|
|
<b>var</b> w, h, vp = false;
|
|
<b>if</b>(!s){
|
|
<b>var</b> d = <b>this</b>.dom;
|
|
<b>if</b>(d == document.body || d == document){
|
|
vp = true;
|
|
w = D.getViewWidth(); h = D.getViewHeight();
|
|
}<b>else</b>{
|
|
w = <b>this</b>.getWidth(); h = <b>this</b>.getHeight();
|
|
}
|
|
}<b>else</b>{
|
|
w = s.width; h = s.height;
|
|
}
|
|
<b>var</b> x = 0, y = 0, r = Math.round;
|
|
<b>switch</b>((anchor || "tl").toLowerCase()){
|
|
<b>case</b> "c":
|
|
x = r(w*.5);
|
|
y = r(h*.5);
|
|
<b>break</b>;
|
|
<b>case</b> "t":
|
|
x = r(w*.5);
|
|
y = 0;
|
|
<b>break</b>;
|
|
<b>case</b> "l":
|
|
x = 0;
|
|
y = r(h*.5);
|
|
<b>break</b>;
|
|
<b>case</b> "r":
|
|
x = w;
|
|
y = r(h*.5);
|
|
<b>break</b>;
|
|
<b>case</b> "b":
|
|
x = r(w*.5);
|
|
y = h;
|
|
<b>break</b>;
|
|
<b>case</b> "tl":
|
|
x = 0;
|
|
y = 0;
|
|
<b>break</b>;
|
|
<b>case</b> "bl":
|
|
x = 0;
|
|
y = h;
|
|
<b>break</b>;
|
|
<b>case</b> "br":
|
|
x = w;
|
|
y = h;
|
|
<b>break</b>;
|
|
<b>case</b> "tr":
|
|
x = w;
|
|
y = 0;
|
|
<b>break</b>;
|
|
}
|
|
<b>if</b>(local === true){
|
|
<b>return</b> [x, y];
|
|
}
|
|
<b>if</b>(vp){
|
|
<b>var</b> sc = <b>this</b>.getScroll();
|
|
<b>return</b> [x + sc.left, y + sc.top];
|
|
}
|
|
<i>//Add the element's offset xy</i>
|
|
<b>var</b> o = <b>this</b>.getXY();
|
|
<b>return</b> [x+o[0], y+o[1]];
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the x,y coordinates to align <b>this</b> element <b>with</b> another element. See {@link #alignTo} <b>for</b> more info on the
|
|
* supported position values.
|
|
* @param {String/HTMLElement/Ext.Element} element The element to align to.
|
|
* @param {String} position The position to align to.
|
|
* @param {Array} offsets (optional) Offset the positioning by [x, y]
|
|
* @<b>return</b> {Array} [x, y]
|
|
*/</i>
|
|
getAlignToXY : <b>function</b>(el, p, o){
|
|
el = Ext.get(el), d = <b>this</b>.dom;
|
|
<b>if</b>(!el.dom){
|
|
throw "Element.alignTo <b>with</b> an element that doesn't exist";
|
|
}
|
|
<b>var</b> c = false; <i>//constrain to viewport</i>
|
|
<b>var</b> p1 = "", p2 = "";
|
|
o = o || [0,0];
|
|
|
|
<b>if</b>(!p){
|
|
p = "tl-bl";
|
|
}<b>else</b> if(p == "?"){
|
|
p = "tl-bl?";
|
|
}<b>else</b> if(p.indexOf("-") == -1){
|
|
p = "tl-" + p;
|
|
}
|
|
p = p.toLowerCase();
|
|
<b>var</b> m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
|
|
<b>if</b>(!m){
|
|
throw "Element.alignTo <b>with</b> an invalid alignment " + p;
|
|
}
|
|
p1 = m[1], p2 = m[2], c = m[3] ? true : false;
|
|
|
|
<i>//Subtract the aligned el"s internal xy from the target"s offset xy</i>
|
|
<i>//plus custom offset to get the aligned el's <b>new</b> offset xy</i>
|
|
<b>var</b> a1 = <b>this</b>.getAnchorXY(p1, true);
|
|
<b>var</b> a2 = el.getAnchorXY(p2, false);
|
|
<b>var</b> x = a2[0] - a1[0] + o[0];
|
|
<b>var</b> y = a2[1] - a1[1] + o[1];
|
|
<b>if</b>(c){
|
|
<i>//constrain the aligned el to viewport <b>if</b> necessary</i>
|
|
<b>var</b> w = <b>this</b>.getWidth(), h = <b>this</b>.getHeight(), r = el.getRegion();
|
|
<i>// 5px of margin <b>for</b> ie</i>
|
|
<b>var</b> dw = D.getViewWidth()-5, dh = D.getViewHeight()-5;
|
|
|
|
<i>//If we are at a viewport boundary and the aligned el is anchored on a target border that is</i>
|
|
<i>//perpendicular to the vp border, allow the aligned el to slide on that border,</i>
|
|
<i>//otherwise swap the aligned el to the opposite border of the target.</i>
|
|
<b>var</b> p1y = p1.charAt(0), p1x = p1.charAt(p1.length-1);
|
|
<b>var</b> p2y = p2.charAt(0), p2x = p2.charAt(p2.length-1);
|
|
<b>var</b> swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
|
|
<b>var</b> swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
|
|
|
|
<b>var</b> doc = document;
|
|
<b>var</b> scrollX = (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0)+5;
|
|
<b>var</b> scrollY = (doc.documentElement.scrollTop || doc.body.scrollTop || 0)+5;
|
|
|
|
<b>if</b>((x+w) > dw){
|
|
x = swapX ? r.left-w : dw-w;
|
|
}
|
|
<b>if</b>(x < scrollX){
|
|
x = swapX ? r.right : scrollX;
|
|
}
|
|
<b>if</b>((y+h) > dh){
|
|
y = swapY ? r.top-h : dh-h;
|
|
}
|
|
<b>if</b> (y < scrollY){
|
|
y = swapY ? r.bottom : scrollY;
|
|
}
|
|
}
|
|
<b>return</b> [x,y];
|
|
},
|
|
|
|
getConstrainToXY : <b>function</b>(){
|
|
<b>var</b> os = {top:0, left:0, bottom:0, right: 0};
|
|
|
|
<b>return</b> function(el, local, offsets){
|
|
el = Ext.get(el);
|
|
offsets = offsets ? Ext.applyIf(offsets, os) : os;
|
|
|
|
<b>var</b> vw, vh, vx = 0, vy = 0;
|
|
<b>if</b>(el.dom == document.body || el.dom == document){
|
|
vw = Ext.lib.Dom.getViewWidth();
|
|
vh = Ext.lib.Dom.getViewHeight();
|
|
}<b>else</b>{
|
|
vw = el.dom.clientWidth;
|
|
vh = el.dom.clientHeight;
|
|
<b>if</b>(!local){
|
|
<b>var</b> vxy = el.getXY();
|
|
vx = vxy[0];
|
|
vy = vxy[1];
|
|
}
|
|
}
|
|
|
|
<b>var</b> s = el.getScroll();
|
|
|
|
vx += offsets.left + s.left;
|
|
vy += offsets.top + s.top;
|
|
|
|
vw -= offsets.right;
|
|
vh -= offsets.bottom;
|
|
|
|
<b>var</b> vr = vx+vw;
|
|
<b>var</b> vb = vy+vh;
|
|
|
|
<b>var</b> xy = !local ? <b>this</b>.getXY() : [<b>this</b>.getLeft(true), <b>this</b>.getTop(true)];
|
|
<b>var</b> x = xy[0], y = xy[1];
|
|
<b>var</b> w = <b>this</b>.dom.offsetWidth, h = <b>this</b>.dom.offsetHeight;
|
|
|
|
<i>// only move it <b>if</b> it needs it</i>
|
|
<b>var</b> moved = false;
|
|
|
|
<i>// first validate right/bottom</i>
|
|
<b>if</b>((x + w) > vr){
|
|
x = vr - w;
|
|
moved = true;
|
|
}
|
|
<b>if</b>((y + h) > vb){
|
|
y = vb - h;
|
|
moved = true;
|
|
}
|
|
<i>// then make sure top/left isn't negative</i>
|
|
<b>if</b>(x < vx){
|
|
x = vx;
|
|
moved = true;
|
|
}
|
|
<b>if</b>(y < vy){
|
|
y = vy;
|
|
moved = true;
|
|
}
|
|
<b>return</b> moved ? [x, y] : false;
|
|
};
|
|
}(),
|
|
|
|
<i>/**
|
|
* Aligns <b>this</b> element <b>with</b> another element relative to the specified anchor points. If the other element is the
|
|
* document it aligns it to the viewport.
|
|
* The position parameter is optional, and can be specified <b>in</b> any one of the following formats:
|
|
* <ul>
|
|
* <li><b>Blank</b>: Defaults to aligning the element"s top-left corner to the target"s bottom-left corner ("tl-bl").</li>
|
|
* <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
|
|
* The element being aligned will position its top-left corner (tl) to that point. <i>This method has been
|
|
* deprecated <b>in</b> favor of the newer two anchor syntax below</i>.</li>
|
|
* <li><b>Two anchors</b>: If two values from the table below are passed separated by a dash, the first value is used as the
|
|
* element"s anchor point, and the second value is used as the target"s anchor point.</li>
|
|
* </ul>
|
|
* In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of
|
|
* the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
|
|
* the viewport <b>if</b> necessary. Note that the element being aligned might be swapped to align to a different position than
|
|
* that specified <b>in</b> order to enforce the viewport constraints.
|
|
* Following are all of the supported anchor positions:
|
|
<pre>
|
|
Value Description
|
|
----- -----------------------------
|
|
tl The top left corner (<b>default</b>)
|
|
t The center of the top edge
|
|
tr The top right corner
|
|
l The center of the left edge
|
|
c In the center of the element
|
|
r The center of the right edge
|
|
bl The bottom left corner
|
|
b The center of the bottom edge
|
|
br The bottom right corner
|
|
</pre>
|
|
Example Usage:
|
|
<pre><code>
|
|
<i>// align el to other-el using the <b>default</b> positioning ("tl-bl", non-constrained)</i>
|
|
el.alignTo("other-el");
|
|
|
|
<i>// align the top left corner of el <b>with</b> the top right corner of other-el (constrained to viewport)</i>
|
|
el.alignTo("other-el", "tr?");
|
|
|
|
<i>// align the bottom right corner of el <b>with</b> the center left edge of other-el</i>
|
|
el.alignTo("other-el", "br-l?");
|
|
|
|
<i>// align the center of el <b>with</b> the bottom left corner of other-el and</i>
|
|
<i>// adjust the x position by -6 pixels (and the y position by 0)</i>
|
|
el.alignTo("other-el", "c-bl", [-6, 0]);
|
|
</code></pre>
|
|
* @param {String/HTMLElement/Ext.Element} element The element to align to.
|
|
* @param {String} position The position to align to.
|
|
* @param {Array} offsets (optional) Offset the positioning by [x, y]
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
alignTo : <b>function</b>(element, position, offsets, animate){
|
|
<b>var</b> xy = <b>this</b>.getAlignToXY(element, position, offsets);
|
|
<b>this</b>.setXY(xy, <b>this</b>.preanim(arguments, 3));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Anchors an element to another element and realigns it when the window is resized.
|
|
* @param {String/HTMLElement/Ext.Element} element The element to align to.
|
|
* @param {String} position The position to align to.
|
|
* @param {Array} offsets (optional) Offset the positioning by [x, y]
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If <b>this</b> parameter
|
|
* is a number, it is used as the buffer delay (defaults to 50ms).
|
|
* @param
|
|
*/</i>
|
|
anchorTo : <b>function</b>(el, alignment, offsets, animate, monitorScroll, callback){
|
|
<b>var</b> action = <b>function</b>(){
|
|
<b>this</b>.alignTo(el, alignment, offsets, animate);
|
|
Ext.callback(callback, <b>this</b>);
|
|
};
|
|
Ext.EventManager.onWindowResize(action, <b>this</b>);
|
|
<b>var</b> tm = <b>typeof</b> monitorScroll;
|
|
<b>if</b>(tm != 'undefined'){
|
|
Ext.EventManager.on(window, 'scroll', action, <b>this</b>,
|
|
{buffer: tm == 'number' ? monitorScroll : 50});
|
|
}
|
|
action.call(<b>this</b>); <i>// align immediately</i>
|
|
<b>return</b> this;
|
|
},
|
|
<i>/**
|
|
* Clears any opacity settings from <b>this</b> element. Required <b>in</b> some cases <b>for</b> IE.
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
clearOpacity : <b>function</b>(){
|
|
<b>if</b> (window.ActiveXObject) {
|
|
<b>this</b>.dom.style.filter = "";
|
|
} <b>else</b> {
|
|
<b>this</b>.dom.style.opacity = "";
|
|
<b>this</b>.dom.style["-moz-opacity"] = "";
|
|
<b>this</b>.dom.style["-khtml-opacity"] = "";
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Hide <b>this</b> element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
hide : <b>function</b>(animate){
|
|
<b>this</b>.setVisible(false, <b>this</b>.preanim(arguments, 0));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Show <b>this</b> element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
show : <b>function</b>(animate){
|
|
<b>this</b>.setVisible(true, <b>this</b>.preanim(arguments, 0));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* @private Test <b>if</b> size has a unit, otherwise appends the <b>default</b>
|
|
*/</i>
|
|
addUnits : <b>function</b>(size){
|
|
<b>return</b> Ext.Element.addUnits(size, <b>this</b>.defaultUnit);
|
|
},
|
|
|
|
<i>/**
|
|
* Temporarily enables offsets (width,height,x,y) <b>for</b> an element <b>with</b> display:none, use endMeasure() when done.
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
beginMeasure : <b>function</b>(){
|
|
<b>var</b> el = <b>this</b>.dom;
|
|
<b>if</b>(el.offsetWidth || el.offsetHeight){
|
|
<b>return</b> this; <i>// offsets work already</i>
|
|
}
|
|
<b>var</b> changed = [];
|
|
<b>var</b> p = <b>this</b>.dom, b = document.body; <i>// start <b>with</b> this element</i>
|
|
<b>while</b>((!el.offsetWidth && !el.offsetHeight) && p && p.tagName && p != b){
|
|
<b>var</b> pe = Ext.get(p);
|
|
<b>if</b>(pe.getStyle('display') == 'none'){
|
|
changed.push({el: p, visibility: pe.getStyle("visibility")});
|
|
p.style.visibility = "hidden";
|
|
p.style.display = "block";
|
|
}
|
|
p = p.parentNode;
|
|
}
|
|
<b>this</b>._measureChanged = changed;
|
|
<b>return</b> this;
|
|
|
|
},
|
|
|
|
<i>/**
|
|
* Restores displays to before beginMeasure was called
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
endMeasure : <b>function</b>(){
|
|
<b>var</b> changed = <b>this</b>._measureChanged;
|
|
<b>if</b>(changed){
|
|
<b>for</b>(var i = 0, len = changed.length; i < len; i++) {
|
|
<b>var</b> r = changed[i];
|
|
r.el.style.visibility = r.visibility;
|
|
r.el.style.display = "none";
|
|
}
|
|
<b>this</b>._measureChanged = null;
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Update the innerHTML of <b>this</b> element, optionally searching <b>for</b> and processing scripts
|
|
* @param {String} html The <b>new</b> HTML
|
|
* @param {Boolean} loadScripts (optional) true to look <b>for</b> and process scripts
|
|
* @param {Function} callback For async script loading you can be noticed when the update completes
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
update : <b>function</b>(html, loadScripts, callback){
|
|
<b>if</b>(typeof html == "undefined"){
|
|
html = "";
|
|
}
|
|
<b>if</b>(loadScripts !== true){
|
|
<b>this</b>.dom.innerHTML = html;
|
|
<b>if</b>(typeof callback == "<b>function</b>"){
|
|
callback();
|
|
}
|
|
<b>return</b> this;
|
|
}
|
|
<b>var</b> id = Ext.id();
|
|
<b>var</b> dom = <b>this</b>.dom;
|
|
|
|
html += '<span id="' + id + '"></span>';
|
|
|
|
E.onAvailable(id, <b>function</b>(){
|
|
<b>var</b> hd = document.getElementsByTagName("head")[0];
|
|
<b>var</b> re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;
|
|
<b>var</b> srcRe = /\ssrc=([\'\"])(.*?)\1/i;
|
|
<b>var</b> typeRe = /\stype=([\'\"])(.*?)\1/i;
|
|
|
|
<b>var</b> match;
|
|
<b>while</b>(match = re.exec(html)){
|
|
<b>var</b> attrs = match[1];
|
|
<b>var</b> srcMatch = attrs ? attrs.match(srcRe) : false;
|
|
<b>if</b>(srcMatch && srcMatch[2]){
|
|
<b>var</b> s = document.createElement("script");
|
|
s.src = srcMatch[2];
|
|
<b>var</b> typeMatch = attrs.match(typeRe);
|
|
<b>if</b>(typeMatch && typeMatch[2]){
|
|
s.type = typeMatch[2];
|
|
}
|
|
hd.appendChild(s);
|
|
}<b>else</b> if(match[2] && match[2].length > 0){
|
|
eval(match[2]);
|
|
}
|
|
}
|
|
<b>var</b> el = document.getElementById(id);
|
|
<b>if</b>(el){el.parentNode.removeChild(el);}
|
|
<b>if</b>(typeof callback == "<b>function</b>"){
|
|
callback();
|
|
}
|
|
});
|
|
dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Direct access to the UpdateManager update() method (takes the same parameters).
|
|
* @param {String/Function} url The url <b>for</b> this request or a <b>function</b> to call to get the url
|
|
* @param {String/Object} params (optional) The parameters to pass as either a url encoded string "param1=1&amp;param2=2" or an object {param1: 1, param2: 2}
|
|
* @param {Function} callback (optional) Callback when transaction is complete - called <b>with</b> signature (oElement, bSuccess)
|
|
* @param {Boolean} discardUrl (optional) By <b>default</b> when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
load : <b>function</b>(){
|
|
<b>var</b> um = <b>this</b>.getUpdateManager();
|
|
um.update.apply(um, arguments);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Gets <b>this</b> elements UpdateManager
|
|
* @<b>return</b> {Ext.UpdateManager} The UpdateManager
|
|
*/</i>
|
|
getUpdateManager : <b>function</b>(){
|
|
<b>if</b>(!<b>this</b>.updateManager){
|
|
<b>this</b>.updateManager = <b>new</b> Ext.UpdateManager(<b>this</b>);
|
|
}
|
|
<b>return</b> this.updateManager;
|
|
},
|
|
|
|
<i>/**
|
|
* Disables text selection <b>for</b> this element (normalized across browsers)
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
unselectable : <b>function</b>(){
|
|
<b>this</b>.dom.unselectable = "on";
|
|
<b>this</b>.swallowEvent("selectstart", true);
|
|
<b>this</b>.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
|
|
<b>this</b>.addClass("x-unselectable");
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Calculates the x, y to center <b>this</b> element on the screen
|
|
* @<b>return</b> {Array} The x, y values [x, y]
|
|
*/</i>
|
|
getCenterXY : <b>function</b>(){
|
|
<b>return</b> this.getAlignToXY(document, 'c-c');
|
|
},
|
|
|
|
<i>/**
|
|
* Centers the Element <b>in</b> either the viewport, or another Element.
|
|
* @param {String/HTMLElement/Ext.Element} centerIn (optional) The element <b>in</b> which to center the element.
|
|
*/</i>
|
|
center : <b>function</b>(centerIn){
|
|
<b>this</b>.alignTo(centerIn || document, 'c-c');
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Tests various css rules/browsers to determine <b>if</b> this element uses a border box
|
|
* @<b>return</b> {Boolean}
|
|
*/</i>
|
|
isBorderBox : <b>function</b>(){
|
|
<b>return</b> noBoxAdjust[<b>this</b>.dom.tagName.toLowerCase()] || Ext.isBorderBox;
|
|
},
|
|
|
|
<i>/**
|
|
* Return a box {x, y, width, height} that can be used to set another elements
|
|
* size/location to match <b>this</b> element.
|
|
* @param {Boolean} contentBox (optional) If true a box <b>for</b> the content of the element is returned.
|
|
* @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
|
|
* @<b>return</b> {Object}
|
|
*/</i>
|
|
getBox : <b>function</b>(contentBox, local){
|
|
<b>var</b> xy;
|
|
<b>if</b>(!local){
|
|
xy = <b>this</b>.getXY();
|
|
}<b>else</b>{
|
|
<b>var</b> left = parseInt(<b>this</b>.getStyle("left"), 10) || 0;
|
|
<b>var</b> top = parseInt(<b>this</b>.getStyle("top"), 10) || 0;
|
|
xy = [left, top];
|
|
}
|
|
<b>var</b> el = <b>this</b>.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
|
|
<b>if</b>(!contentBox){
|
|
bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
|
|
}<b>else</b>{
|
|
<b>var</b> l = <b>this</b>.getBorderWidth("l")+<b>this</b>.getPadding("l");
|
|
<b>var</b> r = <b>this</b>.getBorderWidth("r")+<b>this</b>.getPadding("r");
|
|
<b>var</b> t = <b>this</b>.getBorderWidth("t")+<b>this</b>.getPadding("t");
|
|
<b>var</b> b = <b>this</b>.getBorderWidth("b")+<b>this</b>.getPadding("b");
|
|
bx = {x: xy[0]+l, y: xy[1]+t, 0: xy[0]+l, 1: xy[1]+t, width: w-(l+r), height: h-(t+b)};
|
|
}
|
|
bx.right = bx.x + bx.width;
|
|
bx.bottom = bx.y + bx.height;
|
|
<b>return</b> bx;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the sum width of the padding and borders <b>for</b> the passed "sides". See getBorderWidth()
|
|
<b>for</b> more information about the sides.
|
|
* @param {String} sides
|
|
* @<b>return</b> {Number}
|
|
*/</i>
|
|
getFrameWidth : <b>function</b>(sides){
|
|
<b>return</b> this.getPadding(sides) + <b>this</b>.getBorderWidth(sides);
|
|
},
|
|
|
|
<i>/**
|
|
* Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.
|
|
* @param {Object} box The box to fill {x, y, width, height}
|
|
* @param {Boolean} adjust (optional) Whether to adjust <b>for</b> box-model issues automatically
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
setBox : <b>function</b>(box, adjust, animate){
|
|
<b>var</b> w = box.width, h = box.height;
|
|
<b>if</b>((adjust && !<b>this</b>.autoBoxAdjust) && !<b>this</b>.isBorderBox()){
|
|
w -= (<b>this</b>.getBorderWidth("lr") + <b>this</b>.getPadding("lr"));
|
|
h -= (<b>this</b>.getBorderWidth("tb") + <b>this</b>.getPadding("tb"));
|
|
}
|
|
<b>this</b>.setBounds(box.x, box.y, w, h, <b>this</b>.preanim(arguments, 2));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Forces the browser to repaint <b>this</b> element
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
repaint : <b>function</b>(){
|
|
<b>var</b> dom = <b>this</b>.dom;
|
|
<b>this</b>.addClass("x-repaint");
|
|
setTimeout(<b>function</b>(){
|
|
Ext.get(dom).removeClass("x-repaint");
|
|
}, 1);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns an object <b>with</b> properties top, left, right and bottom representing the margins of <b>this</b> element unless sides is passed,
|
|
* then it returns the calculated width of the sides (see getPadding)
|
|
* @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
|
|
* @<b>return</b> {Object/Number}
|
|
*/</i>
|
|
getMargins : <b>function</b>(side){
|
|
<b>if</b>(!side){
|
|
<b>return</b> {
|
|
top: parseInt(<b>this</b>.getStyle("margin-top"), 10) || 0,
|
|
left: parseInt(<b>this</b>.getStyle("margin-left"), 10) || 0,
|
|
bottom: parseInt(<b>this</b>.getStyle("margin-bottom"), 10) || 0,
|
|
right: parseInt(<b>this</b>.getStyle("margin-right"), 10) || 0
|
|
};
|
|
}<b>else</b>{
|
|
<b>return</b> this.addStyles(side, El.margins);
|
|
}
|
|
},
|
|
|
|
addStyles : <b>function</b>(sides, styles){
|
|
<b>var</b> val = 0;
|
|
<b>for</b>(var i = 0, len = sides.length; i < len; i++){
|
|
<b>var</b> w = parseInt(<b>this</b>.getStyle(styles[sides.charAt(i)]), 10);
|
|
<b>if</b>(!isNaN(w)) val += w;
|
|
}
|
|
<b>return</b> val;
|
|
},
|
|
|
|
<i>/**
|
|
* Creates a proxy element of <b>this</b> element
|
|
* @param {String/Object} config The class name of the proxy element or a DomHelper config object
|
|
* @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
|
|
* @param {Boolean} matchBox (optional) True to align and size the proxy to <b>this</b> element now (defaults to false)
|
|
* @<b>return</b> {Ext.Element} The <b>new</b> proxy element
|
|
*/</i>
|
|
createProxy : <b>function</b>(config, renderTo, matchBox){
|
|
<b>if</b>(renderTo){
|
|
renderTo = Ext.getDom(renderTo);
|
|
}<b>else</b>{
|
|
renderTo = document.body;
|
|
}
|
|
config = <b>typeof</b> config == "object" ?
|
|
config : {tag : "div", cls: config};
|
|
<b>var</b> proxy = Ext.DomHelper.append(renderTo, config, true);
|
|
<b>if</b>(matchBox){
|
|
proxy.setBox(<b>this</b>.getBox());
|
|
}
|
|
<b>return</b> proxy;
|
|
},
|
|
|
|
<i>/**
|
|
* Puts a mask over <b>this</b> element to disable user interaction. Requires core.css.
|
|
* This method can only be applied to elements which accept child nodes.
|
|
* @param {String} msg (optional) A message to display <b>in</b> the mask
|
|
* @param {String} msgCls (optional) A css class to apply to the msg element
|
|
* @<b>return</b> {Element} The message element
|
|
*/</i>
|
|
mask : <b>function</b>(msg, msgCls){
|
|
<b>if</b>(this.getStyle("position") == "static"){
|
|
<b>this</b>.setStyle("position", "relative");
|
|
}
|
|
<b>if</b>(!<b>this</b>._mask){
|
|
<b>this</b>._mask = Ext.DomHelper.append(<b>this</b>.dom, {tag:"div", cls:"ext-el-mask"}, true);
|
|
}
|
|
<b>this</b>.addClass("x-masked");
|
|
<b>this</b>._mask.setDisplayed(true);
|
|
<b>if</b>(typeof msg == 'string'){
|
|
<b>if</b>(!<b>this</b>._maskMsg){
|
|
<b>this</b>._maskMsg = Ext.DomHelper.append(<b>this</b>.dom, {tag:"div", cls:"ext-el-mask-msg", cn:{tag:'div'}}, true);
|
|
}
|
|
<b>var</b> mm = <b>this</b>._maskMsg;
|
|
mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
|
|
mm.dom.firstChild.innerHTML = msg;
|
|
mm.setDisplayed(true);
|
|
mm.center(<b>this</b>);
|
|
}
|
|
<b>return</b> this._mask;
|
|
},
|
|
|
|
<i>/**
|
|
* Removes a previously applied mask. If removeEl is true the mask overlay is destroyed, otherwise
|
|
* it is cached <b>for</b> reuse.
|
|
*/</i>
|
|
unmask : <b>function</b>(removeEl){
|
|
<b>if</b>(this._mask){
|
|
<b>if</b>(removeEl === true){
|
|
<b>this</b>._mask.remove();
|
|
<b>delete</b> this._mask;
|
|
<b>if</b>(this._maskMsg){
|
|
<b>this</b>._maskMsg.remove();
|
|
<b>delete</b> this._maskMsg;
|
|
}
|
|
}<b>else</b>{
|
|
<b>this</b>._mask.setDisplayed(false);
|
|
<b>if</b>(this._maskMsg){
|
|
<b>this</b>._maskMsg.setDisplayed(false);
|
|
}
|
|
}
|
|
}
|
|
<b>this</b>.removeClass("x-masked");
|
|
},
|
|
|
|
<i>/**
|
|
* Returns true <b>if</b> this element is masked
|
|
* @<b>return</b> {Boolean}
|
|
*/</i>
|
|
isMasked : <b>function</b>(){
|
|
<b>return</b> this._mask && <b>this</b>._mask.isVisible();
|
|
},
|
|
|
|
<i>/**
|
|
* Creates an iframe shim <b>for</b> this element to keep selects and other windowed objects from
|
|
* showing through.
|
|
* @<b>return</b> {Ext.Element} The <b>new</b> shim element
|
|
*/</i>
|
|
createShim : <b>function</b>(){
|
|
<b>var</b> el = document.createElement('iframe');
|
|
el.frameBorder = 'no';
|
|
el.className = 'ext-shim';
|
|
<b>if</b>(Ext.isIE && Ext.isSecure){
|
|
el.src = Ext.SSL_SECURE_URL;
|
|
}
|
|
<b>var</b> shim = Ext.get(<b>this</b>.dom.parentNode.insertBefore(el, <b>this</b>.dom));
|
|
shim.autoBoxAdjust = false;
|
|
<b>return</b> shim;
|
|
},
|
|
|
|
<i>/**
|
|
* Removes <b>this</b> element from the DOM and deletes it from the cache
|
|
*/</i>
|
|
remove : <b>function</b>(){
|
|
<b>if</b>(this.dom.parentNode){
|
|
<b>this</b>.dom.parentNode.removeChild(<b>this</b>.dom);
|
|
}
|
|
<b>delete</b> El.cache[<b>this</b>.dom.id];
|
|
},
|
|
|
|
<i>/**
|
|
* Sets up event handlers to add and remove a css class when the mouse is over <b>this</b> element
|
|
* @param {String} className
|
|
* @param {Boolean} preventFlicker (optional) If set to true, it prevents flickering by filtering
|
|
* mouseout events <b>for</b> children elements
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
addClassOnOver : <b>function</b>(className, preventFlicker){
|
|
<b>this</b>.on("mouseover", <b>function</b>(){
|
|
Ext.fly(<b>this</b>, '_internal').addClass(className);
|
|
}, <b>this</b>.dom);
|
|
<b>var</b> removeFn = <b>function</b>(e){
|
|
<b>if</b>(preventFlicker !== true || !e.within(<b>this</b>, true)){
|
|
Ext.fly(<b>this</b>, '_internal').removeClass(className);
|
|
}
|
|
};
|
|
<b>this</b>.on("mouseout", removeFn, <b>this</b>.dom);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Sets up event handlers to add and remove a css class when <b>this</b> element has the focus
|
|
* @param {String} className
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
addClassOnFocus : <b>function</b>(className){
|
|
<b>this</b>.on("focus", <b>function</b>(){
|
|
Ext.fly(<b>this</b>, '_internal').addClass(className);
|
|
}, <b>this</b>.dom);
|
|
<b>this</b>.on("blur", <b>function</b>(){
|
|
Ext.fly(<b>this</b>, '_internal').removeClass(className);
|
|
}, <b>this</b>.dom);
|
|
<b>return</b> this;
|
|
},
|
|
<i>/**
|
|
* Sets up event handlers to add and remove a css class when the mouse is down and then up on <b>this</b> element (a click effect)
|
|
* @param {String} className
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
addClassOnClick : <b>function</b>(className){
|
|
<b>var</b> dom = <b>this</b>.dom;
|
|
<b>this</b>.on("mousedown", <b>function</b>(){
|
|
Ext.fly(dom, '_internal').addClass(className);
|
|
<b>var</b> d = Ext.get(document);
|
|
<b>var</b> fn = <b>function</b>(){
|
|
Ext.fly(dom, '_internal').removeClass(className);
|
|
d.removeListener("mouseup", fn);
|
|
};
|
|
d.on("mouseup", fn);
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Stops the specified event from bubbling and optionally prevents the <b>default</b> action
|
|
* @param {String} eventName
|
|
* @param {Boolean} preventDefault (optional) true to prevent the <b>default</b> action too
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
swallowEvent : <b>function</b>(eventName, preventDefault){
|
|
<b>var</b> fn = <b>function</b>(e){
|
|
e.stopPropagation();
|
|
<b>if</b>(preventDefault){
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
<b>if</b>(eventName instanceof Array){
|
|
<b>for</b>(var i = 0, len = eventName.length; i < len; i++){
|
|
<b>this</b>.on(eventName[i], fn);
|
|
}
|
|
<b>return</b> this;
|
|
}
|
|
<b>this</b>.on(eventName, fn);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Sizes <b>this</b> element to its parent element's dimensions performing
|
|
* neccessary box adjustments.
|
|
* @param {Boolean} monitorResize (optional) If true maintains the fit when the browser window is resized.
|
|
* @param {String/HTMLElment/Element} targetParent (optional) The target parent, <b>default</b> to the parentNode.
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
fitToParent : <b>function</b>(monitorResize, targetParent){
|
|
<b>var</b> p = Ext.get(targetParent || <b>this</b>.dom.parentNode);
|
|
<b>this</b>.setSize(p.getComputedWidth()-p.getFrameWidth('lr'), p.getComputedHeight()-p.getFrameWidth('tb'));
|
|
<b>if</b>(monitorResize === true){
|
|
Ext.EventManager.onWindowResize(<b>this</b>.fitToParent.createDelegate(<b>this</b>, []));
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the next sibling, skipping text nodes
|
|
* @<b>return</b> {HTMLElement} The next sibling or null
|
|
*/</i>
|
|
getNextSibling : <b>function</b>(){
|
|
<b>var</b> n = <b>this</b>.dom.nextSibling;
|
|
<b>while</b>(n && n.nodeType != 1){
|
|
n = n.nextSibling;
|
|
}
|
|
<b>return</b> n;
|
|
},
|
|
|
|
<i>/**
|
|
* Gets the previous sibling, skipping text nodes
|
|
* @<b>return</b> {HTMLElement} The previous sibling or null
|
|
*/</i>
|
|
getPrevSibling : <b>function</b>(){
|
|
<b>var</b> n = <b>this</b>.dom.previousSibling;
|
|
<b>while</b>(n && n.nodeType != 1){
|
|
n = n.previousSibling;
|
|
}
|
|
<b>return</b> n;
|
|
},
|
|
|
|
|
|
<i>/**
|
|
* Appends the passed element(s) to <b>this</b> element
|
|
* @param {String/HTMLElement/Array/Element/CompositeElement} el
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
appendChild: <b>function</b>(el){
|
|
el = Ext.get(el);
|
|
el.appendTo(<b>this</b>);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Creates the passed DomHelper config and appends it to <b>this</b> element or optionally inserts it before the passed child element.
|
|
* @param {Object} config DomHelper element config object
|
|
* @param {HTMLElement} insertBefore (optional) a child element of <b>this</b> element
|
|
* @param {Boolean} returnDom (optional) true to <b>return</b> the dom node instead of creating an Element
|
|
* @<b>return</b> {Ext.Element} The <b>new</b> child element
|
|
*/</i>
|
|
createChild: <b>function</b>(config, insertBefore, returnDom){
|
|
config = config || {tag:'div'};
|
|
<b>if</b>(insertBefore){
|
|
<b>return</b> Ext.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
|
|
}
|
|
<b>return</b> Ext.DomHelper[!<b>this</b>.dom.firstChild ? 'overwrite' : 'append'](<b>this</b>.dom, config, returnDom !== true);
|
|
},
|
|
|
|
<i>/**
|
|
* Appends <b>this</b> element to the passed element
|
|
* @param {String/HTMLElement/Element} el The <b>new</b> parent element
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
appendTo: <b>function</b>(el){
|
|
el = Ext.getDom(el);
|
|
el.appendChild(<b>this</b>.dom);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Inserts <b>this</b> element before the passed element <b>in</b> the DOM
|
|
* @param {String/HTMLElement/Element} el The element to insert before
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
insertBefore: <b>function</b>(el){
|
|
el = Ext.getDom(el);
|
|
el.parentNode.insertBefore(<b>this</b>.dom, el);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Inserts <b>this</b> element after the passed element <b>in</b> the DOM
|
|
* @param {String/HTMLElement/Element} el The element to insert after
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
insertAfter: <b>function</b>(el){
|
|
el = Ext.getDom(el);
|
|
el.parentNode.insertBefore(<b>this</b>.dom, el.nextSibling);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Inserts (or creates) an element (or DomHelper config) as the first child of the <b>this</b> element
|
|
* @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
|
|
* @<b>return</b> {Ext.Element} The <b>new</b> child
|
|
*/</i>
|
|
insertFirst: <b>function</b>(el, returnDom){
|
|
el = el || {};
|
|
<b>if</b>(typeof el == 'object' && !el.nodeType){ <i>// dh config</i>
|
|
<b>return</b> this.createChild(el, <b>this</b>.dom.firstChild, returnDom);
|
|
}<b>else</b>{
|
|
el = Ext.getDom(el);
|
|
<b>this</b>.dom.insertBefore(el, <b>this</b>.dom.firstChild);
|
|
<b>return</b> !returnDom ? Ext.get(el) : el;
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Inserts (or creates) the passed element (or DomHelper config) as a sibling of <b>this</b> element
|
|
* @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
|
|
* @param {String} where (optional) 'before' or 'after' defaults to before
|
|
* @param {Boolean} returnDom (optional) True to <b>return</b> the raw DOM element instead of Ext.Element
|
|
* @<b>return</b> {Ext.Element} the inserted Element
|
|
*/</i>
|
|
insertSibling: <b>function</b>(el, where, returnDom){
|
|
where = where ? where.toLowerCase() : 'before';
|
|
el = el || {};
|
|
<b>var</b> rt, refNode = where == 'before' ? <b>this</b>.dom : <b>this</b>.dom.nextSibling;
|
|
|
|
<b>if</b>(typeof el == 'object' && !el.nodeType){ <i>// dh config</i>
|
|
<b>if</b>(where == 'after' && !<b>this</b>.dom.nextSibling){
|
|
rt = Ext.DomHelper.append(<b>this</b>.dom.parentNode, el, !returnDom);
|
|
}<b>else</b>{
|
|
rt = Ext.DomHelper[where == 'after' ? 'insertAfter' : 'insertBefore'](<b>this</b>.dom, el, !returnDom);
|
|
}
|
|
|
|
}<b>else</b>{
|
|
rt = <b>this</b>.dom.parentNode.insertBefore(Ext.getDom(el),
|
|
where == 'before' ? <b>this</b>.dom : <b>this</b>.dom.nextSibling);
|
|
<b>if</b>(!returnDom){
|
|
rt = Ext.get(rt);
|
|
}
|
|
}
|
|
<b>return</b> rt;
|
|
},
|
|
|
|
<i>/**
|
|
* Creates and wraps <b>this</b> element <b>with</b> another element
|
|
* @param {Object} config (optional) DomHelper element config object <b>for</b> the wrapper element or null <b>for</b> an empty div
|
|
* @param {Boolean} returnDom (optional) True to <b>return</b> the raw DOM element instead of Ext.Element
|
|
* @<b>return</b> {/HTMLElementElement} The newly created wrapper element
|
|
*/</i>
|
|
wrap: <b>function</b>(config, returnDom){
|
|
<b>if</b>(!config){
|
|
config = {tag: "div"};
|
|
}
|
|
<b>var</b> newEl = Ext.DomHelper.insertBefore(<b>this</b>.dom, config, !returnDom);
|
|
newEl.dom ? newEl.dom.appendChild(<b>this</b>.dom) : newEl.appendChild(<b>this</b>.dom);
|
|
<b>return</b> newEl;
|
|
},
|
|
|
|
<i>/**
|
|
* Replaces the passed element <b>with</b> this element
|
|
* @param {String/HTMLElement/Element} el The element to replace
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
replace: <b>function</b>(el){
|
|
el = Ext.get(el);
|
|
<b>this</b>.insertBefore(el);
|
|
el.remove();
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Inserts an html fragment into <b>this</b> element
|
|
* @param {String} where Where to insert the html <b>in</b> relation to the <b>this</b> element - beforeBegin, afterBegin, beforeEnd, afterEnd.
|
|
* @param {String} html The HTML fragment
|
|
* @<b>return</b> {HTMLElement} The inserted node (or nearest related <b>if</b> more than 1 inserted)
|
|
*/</i>
|
|
insertHtml : <b>function</b>(where, html){
|
|
<b>return</b> Ext.DomHelper.insertHtml(where, <b>this</b>.dom, html);
|
|
},
|
|
|
|
<i>/**
|
|
* Sets the passed attributes as attributes of <b>this</b> element (a style attribute can be a string, object or <b>function</b>)
|
|
* @param {Object} o The object <b>with</b> the attributes
|
|
* @param {Boolean} useSet (optional) false to override the <b>default</b> setAttribute to use expandos.
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
*/</i>
|
|
set : <b>function</b>(o, useSet){
|
|
<b>var</b> el = <b>this</b>.dom;
|
|
useSet = <b>typeof</b> useSet == 'undefined' ? (el.setAttribute ? true : false) : useSet;
|
|
<b>for</b>(var attr <b>in</b> o){
|
|
<b>if</b>(attr == "style" || <b>typeof</b> o[attr] == "<b>function</b>") <b>continue</b>;
|
|
<b>if</b>(attr=="cls"){
|
|
el.className = o["cls"];
|
|
}<b>else</b>{
|
|
<b>if</b>(useSet) el.setAttribute(attr, o[attr]);
|
|
<b>else</b> el[attr] = o[attr];
|
|
}
|
|
}
|
|
Ext.DomHelper.applyStyles(el, o.style);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Convenience method <b>for</b> constructing a KeyMap
|
|
* @param {Number/Array/Object/String} key Either a string <b>with</b> the keys to listen <b>for</b>, the numeric key code, array of key codes or an object <b>with</b> the following options:
|
|
* {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
|
|
* @param {Function} fn The <b>function</b> to call
|
|
* @param {Object} scope (optional) The scope of the <b>function</b>
|
|
* @<b>return</b> {Ext.KeyMap} The KeyMap created
|
|
*/</i>
|
|
addKeyListener : <b>function</b>(key, fn, scope){
|
|
<b>var</b> config;
|
|
<b>if</b>(typeof key != "object" || key instanceof Array){
|
|
config = {
|
|
key: key,
|
|
fn: fn,
|
|
scope: scope
|
|
};
|
|
}<b>else</b>{
|
|
config = {
|
|
key : key.key,
|
|
shift : key.shift,
|
|
ctrl : key.ctrl,
|
|
alt : key.alt,
|
|
fn: fn,
|
|
scope: scope
|
|
};
|
|
}
|
|
<b>return</b> new Ext.KeyMap(<b>this</b>, config);
|
|
},
|
|
|
|
<i>/**
|
|
* Creates a KeyMap <b>for</b> this element
|
|
* @param {Object} config The KeyMap config. See {@link Ext.KeyMap} <b>for</b> more details
|
|
* @<b>return</b> {Ext.KeyMap} The KeyMap created
|
|
*/</i>
|
|
addKeyMap : <b>function</b>(config){
|
|
<b>return</b> new Ext.KeyMap(<b>this</b>, config);
|
|
},
|
|
|
|
<i>/**
|
|
* Returns true <b>if</b> this element is scrollable.
|
|
* @<b>return</b> {Boolean}
|
|
*/</i>
|
|
isScrollable : <b>function</b>(){
|
|
<b>var</b> dom = <b>this</b>.dom;
|
|
<b>return</b> dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
|
|
},
|
|
|
|
<i>/**
|
|
* Scrolls <b>this</b> element the specified scroll point. It does NOT <b>do</b> bounds checking so <b>if</b> you scroll to a weird value it will try to <b>do</b> it. For auto bounds checking, use scroll().
|
|
* @param {String} side Either "left" <b>for</b> scrollLeft values or "top" <b>for</b> scrollTop values.
|
|
* @param {Number} value The <b>new</b> scroll value
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Element} <b>this</b>
|
|
*/</i>
|
|
|
|
scrollTo : <b>function</b>(side, value, animate){
|
|
<b>var</b> prop = side.toLowerCase() == "left" ? "scrollLeft" : "scrollTop";
|
|
<b>if</b>(!animate || !A){
|
|
<b>this</b>.dom[prop] = value;
|
|
}<b>else</b>{
|
|
<b>var</b> to = prop == "scrollLeft" ? [value, <b>this</b>.dom.scrollTop] : [<b>this</b>.dom.scrollLeft, value];
|
|
<b>this</b>.anim({scroll: {"to": to}}, <b>this</b>.preanim(arguments, 2), 'scroll');
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Scrolls <b>this</b> element the specified direction. Does bounds checking to make sure the scroll is
|
|
* within <b>this</b> elements scrollable range.
|
|
* @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
|
|
* @param {Number} distance How far to scroll the element <b>in</b> pixels
|
|
* @param {Boolean/Object} animate (optional) true <b>for</b> the <b>default</b> animation or a standard Element animation config object
|
|
* @<b>return</b> {Boolean} Returns true <b>if</b> a scroll was triggered or false <b>if</b> the element
|
|
* was scrolled as far as it could go.
|
|
*/</i>
|
|
scroll : <b>function</b>(direction, distance, animate){
|
|
<b>if</b>(!<b>this</b>.isScrollable()){
|
|
<b>return</b>;
|
|
}
|
|
<b>var</b> el = <b>this</b>.dom;
|
|
<b>var</b> l = el.scrollLeft, t = el.scrollTop;
|
|
<b>var</b> w = el.scrollWidth, h = el.scrollHeight;
|
|
<b>var</b> cw = el.clientWidth, ch = el.clientHeight;
|
|
direction = direction.toLowerCase();
|
|
<b>var</b> scrolled = false;
|
|
<b>var</b> a = <b>this</b>.preanim(arguments, 2);
|
|
<b>switch</b>(direction){
|
|
<b>case</b> "l":
|
|
<b>case</b> "left":
|
|
<b>if</b>(w - l > cw){
|
|
<b>var</b> v = Math.min(l + distance, w-cw);
|
|
<b>this</b>.scrollTo("left", v, a);
|
|
scrolled = true;
|
|
}
|
|
<b>break</b>;
|
|
<b>case</b> "r":
|
|
<b>case</b> "right":
|
|
<b>if</b>(l > 0){
|
|
<b>var</b> v = Math.max(l - distance, 0);
|
|
<b>this</b>.scrollTo("left", v, a);
|
|
scrolled = true;
|
|
}
|
|
<b>break</b>;
|
|
<b>case</b> "t":
|
|
<b>case</b> "top":
|
|
<b>case</b> "up":
|
|
<b>if</b>(t > 0){
|
|
<b>var</b> v = Math.max(t - distance, 0);
|
|
<b>this</b>.scrollTo("top", v, a);
|
|
scrolled = true;
|
|
}
|
|
<b>break</b>;
|
|
<b>case</b> "b":
|
|
<b>case</b> "bottom":
|
|
<b>case</b> "down":
|
|
<b>if</b>(h - t > ch){
|
|
<b>var</b> v = Math.min(t + distance, h-ch);
|
|
<b>this</b>.scrollTo("top", v, a);
|
|
scrolled = true;
|
|
}
|
|
<b>break</b>;
|
|
}
|
|
<b>return</b> scrolled;
|
|
},
|
|
|
|
<i>/**
|
|
* Translates the passed page coordinates into left/top css values <b>for</b> this element
|
|
* @param {Number/Array} x The page x or an array containing [x, y]
|
|
* @param {Number} y The page y
|
|
* @param {Object} An object <b>with</b> left and top properties. e.g. {left: (value), top: (value)}
|
|
*/</i>
|
|
translatePoints : <b>function</b>(x, y){
|
|
<b>if</b>(typeof x == 'object' || x instanceof Array){
|
|
y = x[1]; x = x[0];
|
|
}
|
|
<b>var</b> p = <b>this</b>.getStyle('position');
|
|
<b>var</b> o = <b>this</b>.getXY();
|
|
|
|
<b>var</b> l = parseInt(<b>this</b>.getStyle('left'), 10);
|
|
<b>var</b> t = parseInt(<b>this</b>.getStyle('top'), 10);
|
|
|
|
<b>if</b>(isNaN(l)){
|
|
l = (p == "relative") ? 0 : <b>this</b>.dom.offsetLeft;
|
|
}
|
|
<b>if</b>(isNaN(t)){
|
|
t = (p == "relative") ? 0 : <b>this</b>.dom.offsetTop;
|
|
}
|
|
|
|
<b>return</b> {left: (x - o[0] + l), top: (y - o[1] + t)};
|
|
},
|
|
|
|
getScroll : <b>function</b>(){
|
|
<b>var</b> d = <b>this</b>.dom, doc = document;
|
|
<b>if</b>(d == doc || d == doc.body){
|
|
<b>var</b> l = window.pageXOffset || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0;
|
|
<b>var</b> t = window.pageYOffset || doc.documentElement.scrollTop || doc.body.scrollTop || 0;
|
|
<b>return</b> {left: l, top: t};
|
|
}<b>else</b>{
|
|
<b>return</b> {left: d.scrollLeft, top: d.scrollTop};
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Return the CSS color <b>for</b> the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
|
|
* are convert to standard 6 digit hex color.
|
|
* @param {String} attr The css attribute
|
|
* @param {String} defaultValue The <b>default</b> value to use when a valid color isn't found
|
|
* @param {String} prefix (optional) defaults to #. Use an empty string when working <b>with</b>
|
|
* YUI color anims.
|
|
*/</i>
|
|
getColor : <b>function</b>(attr, defaultValue, prefix){
|
|
<b>var</b> v = <b>this</b>.getStyle(attr);
|
|
<b>if</b>(!v || v == "transparent" || v == "inherit") {
|
|
<b>return</b> defaultValue;
|
|
}
|
|
<b>var</b> color = <b>typeof</b> prefix == "undefined" ? "#" : prefix;
|
|
<b>if</b>(v.substr(0, 4) == "rgb("){
|
|
<b>var</b> rvs = v.slice(4, v.length -1).split(",");
|
|
<b>for</b>(var i = 0; i < 3; i++){
|
|
<b>var</b> h = parseInt(rvs[i]).toString(16);
|
|
<b>if</b>(h < 16){
|
|
h = "0" + h;
|
|
}
|
|
color += h;
|
|
}
|
|
} <b>else</b> {
|
|
<b>if</b>(v.substr(0, 1) == "#"){
|
|
<b>if</b>(v.length == 4) {
|
|
<b>for</b>(var i = 1; i < 4; i++){
|
|
<b>var</b> c = v.charAt(i);
|
|
color += c + c;
|
|
}
|
|
}<b>else</b> if(v.length == 7){
|
|
color += v.substr(1);
|
|
}
|
|
}
|
|
}
|
|
<b>return</b>(color.length > 5 ? color.toLowerCase() : defaultValue);
|
|
},
|
|
|
|
boxWrap : <b>function</b>(cls){
|
|
cls = cls || 'x-box';
|
|
<b>var</b> el = Ext.get(<b>this</b>.insertHtml('beforeBegin', String.format('<div class="{0}">'+El.boxMarkup+'</div>', cls)));
|
|
el.child('.'+cls+'-mc').dom.appendChild(<b>this</b>.dom);
|
|
<b>return</b> el;
|
|
},
|
|
|
|
getAttributeNS : Ext.isIE ? <b>function</b>(ns, name){
|
|
<b>var</b> d = <b>this</b>.dom;
|
|
<b>var</b> type = <b>typeof</b> d[ns+":"+name];
|
|
<b>if</b>(type != 'undefined' && type != 'unknown'){
|
|
<b>return</b> d[ns+":"+name];
|
|
}
|
|
<b>return</b> d[name];
|
|
} : <b>function</b>(ns, name){
|
|
<b>var</b> d = <b>this</b>.dom;
|
|
<b>return</b> d.getAttributeNS(ns, name) || d.getAttribute(ns+":"+name) || d.getAttribute(name) || d[name];
|
|
}
|
|
};
|
|
|
|
<b>var</b> ep = El.prototype;
|
|
|
|
<i>/**
|
|
* Appends an event handler (Shorthand <b>for</b> addListener)
|
|
* @param {String} eventName The type of event to append
|
|
* @param {Function} fn The method the event invokes
|
|
* @param {Object} scope (optional) The scope (<b>this</b> object) of the fn
|
|
* @param {Object} options (optional)An object <b>with</b> standard EventManager options
|
|
* @method
|
|
*/</i>
|
|
ep.on = ep.addListener;
|
|
<i>// backwards compat</i>
|
|
ep.mon = ep.addListener;
|
|
|
|
<i>/**
|
|
* Removes an event handler from <b>this</b> element (shorthand <b>for</b> removeListener)
|
|
* @param {String} eventName the type of event to remove
|
|
* @param {Function} fn the method the event invokes
|
|
* @<b>return</b> {Ext.Element} <b>this</b>
|
|
* @method
|
|
*/</i>
|
|
ep.un = ep.removeListener;
|
|
|
|
<i>/**
|
|
* true to automatically adjust width and height settings <b>for</b> box-model issues (<b>default</b> to true)
|
|
*/</i>
|
|
ep.autoBoxAdjust = true;
|
|
<i>/**
|
|
* true to automatically detect display mode and use display instead of visibility <b>with</b> show()/hide() (defaults to false).
|
|
* To enable <b>this</b> globally:<pre><code>Ext.Element.prototype.autoDisplayMode = true;</code></pre>
|
|
*/</i>
|
|
ep.autoDisplayMode = true;
|
|
|
|
El.unitPattern = /\d+(px|em|%|en|ex|pt|<b>in</b>|cm|mm|pc)$/i;
|
|
|
|
El.addUnits = <b>function</b>(v, defaultUnit){
|
|
<b>if</b>(v === "" || v == "auto"){
|
|
<b>return</b> v;
|
|
}
|
|
<b>if</b>(v === undefined){
|
|
<b>return</b> '';
|
|
}
|
|
<b>if</b>(typeof v == "number" || !El.unitPattern.test(v)){
|
|
<b>return</b> v + (defaultUnit || 'px');
|
|
}
|
|
<b>return</b> v;
|
|
};
|
|
|
|
<i>// special markup used throughout Ext when box wrapping elements</i>
|
|
El.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
|
|
<i>/**
|
|
* Visibility mode constant - Use visibility to hide element
|
|
* @static
|
|
* @type Number
|
|
*/</i>
|
|
El.VISIBILITY = 1;
|
|
<i>/**
|
|
* Visibility mode constant - Use display to hide element
|
|
* @static
|
|
* @type Number
|
|
*/</i>
|
|
El.DISPLAY = 2;
|
|
|
|
El.borders = {l: "border-left-width", r: "border-right-width", t: "border-top-width", b: "border-bottom-width"};
|
|
El.paddings = {l: "padding-left", r: "padding-right", t: "padding-top", b: "padding-bottom"};
|
|
El.margins = {l: "margin-left", r: "margin-right", t: "margin-top", b: "margin-bottom"};
|
|
|
|
|
|
|
|
<i>/**
|
|
* @private
|
|
*/</i>
|
|
El.cache = {};
|
|
|
|
<b>var</b> docEl;
|
|
|
|
<i>/**
|
|
* Static method to retrieve Element objects. Uses simple caching to consistently <b>return</b> the same object.
|
|
* Automatically fixes <b>if</b> an object was recreated <b>with</b> the same id via AJAX or DOM.
|
|
* @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
|
|
* @<b>return</b> {Element} The Element object
|
|
* @static
|
|
*/</i>
|
|
El.get = <b>function</b>(el){
|
|
<b>var</b> ex, elm, id;
|
|
<b>if</b>(!el){ <b>return</b> null; }
|
|
<b>if</b>(typeof el == "string"){ <i>// element id</i>
|
|
<b>if</b>(!(elm = document.getElementById(el))){
|
|
<b>return</b> null;
|
|
}
|
|
<b>if</b>(ex = El.cache[el]){
|
|
ex.dom = elm;
|
|
}<b>else</b>{
|
|
ex = El.cache[el] = <b>new</b> El(elm);
|
|
}
|
|
<b>return</b> ex;
|
|
}<b>else</b> if(el.tagName){ <i>// dom element</i>
|
|
<b>if</b>(!(id = el.id)){
|
|
id = Ext.id(el);
|
|
}
|
|
<b>if</b>(ex = El.cache[id]){
|
|
ex.dom = el;
|
|
}<b>else</b>{
|
|
ex = El.cache[id] = <b>new</b> El(el);
|
|
}
|
|
<b>return</b> ex;
|
|
}<b>else</b> if(el instanceof El){
|
|
<b>if</b>(el != docEl){
|
|
el.dom = document.getElementById(el.id) || el.dom; <i>// refresh dom element <b>in</b> case no longer valid,</i>
|
|
<i>// catch <b>case</b> where it hasn't been appended</i>
|
|
El.cache[el.id] = el; <i>// <b>in</b> case it was created directly <b>with</b> Element(), let's cache it</i>
|
|
}
|
|
<b>return</b> el;
|
|
}<b>else</b> if(el.isComposite){
|
|
<b>return</b> el;
|
|
}<b>else</b> if(el instanceof Array){
|
|
<b>return</b> El.select(el);
|
|
}<b>else</b> if(el == document){
|
|
<i>// create a bogus element object representing the document object</i>
|
|
<b>if</b>(!docEl){
|
|
<b>var</b> f = <b>function</b>(){};
|
|
f.prototype = El.prototype;
|
|
docEl = <b>new</b> f();
|
|
docEl.dom = document;
|
|
}
|
|
<b>return</b> docEl;
|
|
}
|
|
<b>return</b> null;
|
|
};
|
|
|
|
El.uncache = <b>function</b>(el){
|
|
<b>for</b>(var i = 0, a = arguments, len = a.length; i < len; i++) {
|
|
<b>if</b>(a[i]){
|
|
<b>delete</b> El.cache[a[i].id || a[i]];
|
|
}
|
|
}
|
|
};
|
|
|
|
<i>// dom is optional</i>
|
|
El.Flyweight = <b>function</b>(dom){
|
|
<b>this</b>.dom = dom;
|
|
};
|
|
El.Flyweight.prototype = El.prototype;
|
|
|
|
El._flyweights = {};
|
|
<i>/**
|
|
* Gets the globally shared flyweight Element, <b>with</b> the passed node as the active element. Do not store a reference to <b>this</b> element -
|
|
* the dom node can be overwritten by other code.
|
|
* @param {String/HTMLElement} el The dom node or id
|
|
* @param {String} named (optional) Allows <b>for</b> creation of named reusable flyweights to
|
|
* prevent conflicts (e.g. internally Ext uses "_internal")
|
|
* @static
|
|
* @<b>return</b> {Element} The shared Element object
|
|
*/</i>
|
|
El.fly = <b>function</b>(el, named){
|
|
named = named || '_global';
|
|
el = Ext.getDom(el);
|
|
<b>if</b>(!el){
|
|
<b>return</b> null;
|
|
}
|
|
<b>if</b>(!El._flyweights[named]){
|
|
El._flyweights[named] = <b>new</b> El.Flyweight();
|
|
}
|
|
El._flyweights[named].dom = el;
|
|
<b>return</b> El._flyweights[named];
|
|
};
|
|
|
|
<i>/**
|
|
* Static method to retrieve Element objects. Uses simple caching to consistently <b>return</b> the same object.
|
|
* Automatically fixes <b>if</b> an object was recreated <b>with</b> the same id via AJAX or DOM.
|
|
* Shorthand of {@link Ext.Element#get}
|
|
* @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
|
|
* @<b>return</b> {Element} The Element object
|
|
* @member Ext
|
|
* @method get
|
|
*/</i>
|
|
Ext.get = El.get;
|
|
<i>/**
|
|
* Gets the globally shared flyweight Element, <b>with</b> the passed node as the active element. Do not store a reference to <b>this</b> element -
|
|
* the dom node can be overwritten by other code.
|
|
* Shorthand of {@link Ext.Element#fly}
|
|
* @param {String/HTMLElement} el The dom node or id
|
|
* @param {String} named (optional) Allows <b>for</b> creation of named reusable flyweights to
|
|
* prevent conflicts (e.g. internally Ext uses "_internal")
|
|
* @static
|
|
* @<b>return</b> {Element} The shared Element object
|
|
* @member Ext
|
|
* @method fly
|
|
*/</i>
|
|
Ext.fly = El.fly;
|
|
|
|
<i>// speedy lookup <b>for</b> elements never to box adjust</i>
|
|
<b>var</b> noBoxAdjust = Ext.isStrict ? {
|
|
select:1
|
|
} : {
|
|
input:1, select:1, textarea:1
|
|
};
|
|
<b>if</b>(Ext.isIE || Ext.isGecko){
|
|
noBoxAdjust['button'] = 1;
|
|
}
|
|
|
|
|
|
Ext.EventManager.on(window, 'unload', <b>function</b>(){
|
|
<b>delete</b> El.cache;
|
|
<b>delete</b> El._flyweights;
|
|
});
|
|
})();
|
|
|
|
</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> |