中间件编程

开发平台：

JavaScript

ext-foundation-debug.js：源码内容

*/
load : function(url, params, cb){
Ext.Ajax.request(Ext.apply({
params: params,
url: url.url || url,
callback: cb,
el: this.dom,
indicatorText: url.indicatorText || ''
}, Ext.isObject(url) ? url : {}));
return this;
},
/**
* Tests various css rules/browsers to determine if this element uses a border box
* @return {Boolean}
*/
isBorderBox : function(){
return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox;
},
/**
* Removes this element from the DOM and deletes it from the cache
*/
remove : function(){
var me = this,
dom = me.dom;
me.removeAllListeners();
delete El.cache[dom.id];
delete El.dataCache[dom.id]
Ext.removeNode(dom);
},
/**
* Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.
* @param {Function} overFn The function to call when the mouse enters the Element.
* @param {Function} outFn The function to call when the mouse leaves the Element.
* @param {Object} scope (optional) The scope (<tt>this</tt> reference) in which the functions are executed. Defaults to the Element's DOM element.
* @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the <tt>options</tt> parameter}.
* @return {Ext.Element} this
*/
hover : function(overFn, outFn, scope, options){
var me = this;
me.on('mouseenter', overFn, scope || me.dom, options);
me.on('mouseleave', outFn, scope || me.dom, options);
return me;
},
/**
* Returns true if this element is an ancestor of the passed element
* @param {HTMLElement/String} el The element to check
* @return {Boolean} True if this element is an ancestor of el, else false
*/
contains : function(el){
return !el ? false : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el);
},
/**
* Returns the value of a namespaced attribute from the element's underlying DOM node.
* @param {String} namespace The namespace in which to look for the attribute
* @param {String} name The attribute name
* @return {String} The attribute value
* @deprecated
*/
getAttributeNS : function(ns, name){
return this.getAttribute(name, ns);
},
/**
* Returns the value of an attribute from the element's underlying DOM node.
* @param {String} name The attribute name
* @param {String} namespace (optional) The namespace in which to look for the attribute
* @return {String} The attribute value
*/
getAttribute : Ext.isIE ? function(name, ns){
var d = this.dom,
type = typeof d[ns + ":" + name];
if(['undefined', 'unknown'].indexOf(type) == -1){
return d[ns + ":" + name];
}
return d[name];
} : function(name, ns){
var d = this.dom;
return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name];
},
/**
* Update the innerHTML of this element
* @param {String} html The new HTML
* @return {Ext.Element} this
*/
update : function(html) {
this.dom.innerHTML = html;
return this;
}
};
var ep = El.prototype;
El.addMethods = function(o){
Ext.apply(ep, o);
};
/**
* Appends an event handler (shorthand for {@link #addListener}).
* @param {String} eventName The type of event to handle
* @param {Function} fn The handler function the event invokes
* @param {Object} scope (optional) The scope (this element) of the handler function
* @param {Object} options (optional) An object containing standard {@link #addListener} options
* @member Ext.Element
* @method on
*/
ep.on = ep.addListener;
/**
* Removes an event handler from this element (see {@link #removeListener} for additional notes).
* @param {String} eventName the type of event to remove
* @param {Function} fn the method the event invokes
* @param {Object} scope (optional) The scope (The <tt>this</tt> reference) of the handler function. Defaults
* to this Element.
* @return {Ext.Element} this
* @member Ext.Element
* @method un
*/
ep.un = ep.removeListener;
/**
* true to automatically adjust width and height settings for box-model issues (default to true)
*/
ep.autoBoxAdjust = true;
// private
var unitPattern = /d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
docEl;
/**
* @private
*/
El.cache = {};
El.dataCache = {};
/**
* Retrieves Ext.Element objects.
* <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
* retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
* its ID, use {@link Ext.ComponentMgr#get}.</p>
* <p>Uses simple caching to consistently return the same object. Automatically fixes if an
* object was recreated with the same id via AJAX or DOM.</p>
* @param {Mixed} el The id of the node, a DOM Node or an existing Element.
* @return {Element} The Element object (or null if no matching element was found)
* @static
* @member Ext.Element
* @method get
*/
El.get = function(el){
var ex,
elm,
id;
if(!el){ return null; }
if (typeof el == "string") { // element id
if (!(elm = DOC.getElementById(el))) {
return null;
}
if (ex = El.cache[el]) {
ex.dom = elm;
} else {
ex = El.cache[el] = new El(elm);
}
return ex;
} else if (el.tagName) { // dom element
if(!(id = el.id)){
id = Ext.id(el);
}
if(ex = El.cache[id]){
ex.dom = el;
}else{
ex = El.cache[id] = new El(el);
}
return ex;
} else if (el instanceof El) {
if(el != docEl){
el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
// catch case where it hasn't been appended
El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
}
return el;
} else if(el.isComposite) {
return el;
} else if(Ext.isArray(el)) {
return El.select(el);
} else if(el == DOC) {
// create a bogus element object representing the document object
if(!docEl){
var f = function(){};
f.prototype = El.prototype;
docEl = new f();
docEl.dom = DOC;
}
return docEl;
}
return null;
};
// private method for getting and setting element data
El.data = function(el, key, value){
var c = El.dataCache[el.id];
if(!c){
c = El.dataCache[el.id] = {};
}
if(arguments.length == 2){
return c[key];
}else{
c[key] = value;
}
};
// private
// Garbage collection - uncache elements/purge listeners on orphaned elements
// so we don't hold a reference and cause the browser to retain them
function garbageCollect(){
if(!Ext.enableGarbageCollector){
clearInterval(El.collectorThread);
} else {
var eid,
el,
d;
for(eid in El.cache){
el = El.cache[eid];
d = el.dom;
// -------------------------------------------------------
// Determining what is garbage:
// -------------------------------------------------------
// !d
// dom node is null, definitely garbage
// -------------------------------------------------------
// !d.parentNode
// no parentNode == direct orphan, definitely garbage
// -------------------------------------------------------
// !d.offsetParent && !document.getElementById(eid)
// display none elements have no offsetParent so we will
// also try to look it up by it's id. However, check
// offsetParent first so we don't do unneeded lookups.
// This enables collection of elements that are not orphans
// directly, but somewhere up the line they have an orphan
// parent.
// -------------------------------------------------------
if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){
delete El.cache[eid];
if(d && Ext.enableListenerCollection){
Ext.EventManager.removeAll(d);
}
}
}
}
}
El.collectorThreadId = setInterval(garbageCollect, 30000);
var flyFn = function(){};
flyFn.prototype = El.prototype;
// dom is optional
El.Flyweight = function(dom){
this.dom = dom;
};
El.Flyweight.prototype = new flyFn();
El.Flyweight.prototype.isFlyweight = true;
El._flyweights = {};
/**
* <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
* the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p>
* <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
* application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}
* will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p>
* @param {String/HTMLElement} el The dom node or id
* @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
* (e.g. internally Ext uses "_global")
* @return {Element} The shared Element object (or null if no matching element was found)
* @member Ext.Element
* @method fly
*/
El.fly = function(el, named){
var ret = null;
named = named || '_global';
if (el = Ext.getDom(el)) {
(El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;
ret = El._flyweights[named];
}
return ret;
};
/**
* Retrieves Ext.Element objects.
* <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
* retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
* its ID, use {@link Ext.ComponentMgr#get}.</p>
* <p>Uses simple caching to consistently return the same object. Automatically fixes if an
* object was recreated with the same id via AJAX or DOM.</p>
* Shorthand of {@link Ext.Element#get}
* @param {Mixed} el The id of the node, a DOM Node or an existing Element.
* @return {Element} The Element object (or null if no matching element was found)
* @member Ext
* @method get
*/
Ext.get = El.get;
/**
* <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
* the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p>
* <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
* application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}
* will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p>
* @param {String/HTMLElement} el The dom node or id
* @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
* (e.g. internally Ext uses "_global")
* @return {Element} The shared Element object (or null if no matching element was found)
* @member Ext
* @method fly
*/
Ext.fly = El.fly;
// speedy lookup for elements never to box adjust
var noBoxAdjust = Ext.isStrict ? {
select:1
} : {
input:1, select:1, textarea:1
};
if(Ext.isIE || Ext.isGecko){
noBoxAdjust['button'] = 1;
}
Ext.EventManager.on(window, 'unload', function(){
delete El.cache;
delete El.dataCache;
delete El._flyweights;
});
})();
/**
* @class Ext.Element
*/
Ext.Element.addMethods({
/**
* Stops the specified event(s) from bubbling and optionally prevents the default action
* @param {String/Array} eventName an event / array of events to stop from bubbling
* @param {Boolean} preventDefault (optional) true to prevent the default action too
* @return {Ext.Element} this
*/
swallowEvent : function(eventName, preventDefault){
var me = this;
function fn(e){
e.stopPropagation();
if(preventDefault){
e.preventDefault();
}
}
if(Ext.isArray(eventName)){
Ext.each(eventName, function(e) {
me.on(e, fn);
});
return me;
}
me.on(eventName, fn);
return me;
},
/**
* Create an event handler on this element such that when the event fires and is handled by this element,
* it will be relayed to another object (i.e., fired again as if it originated from that object instead).
* @param {String} eventName The type of event to relay
* @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context
* for firing the relayed event
*/
relayEvent : function(eventName, observable){
this.on(eventName, function(e){
observable.fireEvent(eventName, e);
});
},
/**
* Removes worthless text nodes
* @param {Boolean} forceReclean (optional) By default the element
* keeps track if it has been cleaned already so
* you can call this over and over. However, if you update the element and
* need to force a reclean, you can pass true.
*/
clean : function(forceReclean){
var me = this,
dom = me.dom,
n = dom.firstChild,
ni = -1;
if(Ext.Element.data(dom, 'isCleaned') && forceReclean !== true){
return me;
}
while(n){
var nx = n.nextSibling;
if(n.nodeType == 3 && !/S/.test(n.nodeValue)){
dom.removeChild(n);
}else{
n.nodeIndex = ++ni;
}
n = nx;
}
Ext.Element.data(dom, 'isCleaned', true);
return me;
},
/**
* Direct access to the Updater {@link Ext.Updater#update} method. The method takes the same object
* parameter as {@link Ext.Updater#update}
* @return {Ext.Element} this
*/
load : function(){
var um = this.getUpdater();
um.update.apply(um, arguments);
return this;
},
/**
* Gets this element's {@link Ext.Updater Updater}
* @return {Ext.Updater} The Updater
*/
getUpdater : function(){
return this.updateManager || (this.updateManager = new Ext.Updater(this));
},
/**
* Update the innerHTML of this element, optionally searching for and processing scripts
* @param {String} html The new HTML
* @param {Boolean} loadScripts (optional) True to look for and process scripts (defaults to false)
* @param {Function} callback (optional) For async script loading you can be notified when the update completes
* @return {Ext.Element} this
*/
update : function(html, loadScripts, callback){
html = html || "";
if(loadScripts !== true){
this.dom.innerHTML = html;
if(Ext.isFunction(callback)){
callback();
}
return this;
}
var id = Ext.id(),
dom = this.dom;
html += '<span id="' + id + '"></span>';
Ext.lib.Event.onAvailable(id, function(){
var DOC = document,
hd = DOC.getElementsByTagName("head")[0],
re = /(?:<script([^>]*)?>)((n|r|.)*?)(?:</script>)/ig,
srcRe = /ssrc=(['"])(.*?)1/i,
typeRe = /stype=(['"])(.*?)1/i,
match,
attrs,
srcMatch,
typeMatch,
el,
s;
while((match = re.exec(html))){
attrs = match[1];
srcMatch = attrs ? attrs.match(srcRe) : false;
if(srcMatch && srcMatch[2]){
s = DOC.createElement("script");
s.src = srcMatch[2];
typeMatch = attrs.match(typeRe);
if(typeMatch && typeMatch[2]){
s.type = typeMatch[2];
}
hd.appendChild(s);
}else if(match[2] && match[2].length > 0){
if(window.execScript) {
window.execScript(match[2]);
} else {
window.eval(match[2]);
}
}
}
el = DOC.getElementById(id);
if(el){Ext.removeNode(el);}
if(Ext.isFunction(callback)){
callback();
}
});
dom.innerHTML = html.replace(/(?:<script.*?>)((n|r|.)*?)(?:</script>)/ig, "");
return this;
},
/**
* Creates a proxy element of this 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 this element now (defaults to false)
* @return {Ext.Element} The new proxy element
*/
createProxy : function(config, renderTo, matchBox){
config = Ext.isObject(config) ? config : {tag : "div", cls: config};
var me = this,
proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) :
Ext.DomHelper.insertBefore(me.dom, config, true);
if(matchBox && me.setBox && me.getBox){ // check to make sure Element.position.js is loaded
proxy.setBox(me.getBox());
}
return proxy;
}
});
Ext.Element.prototype.getUpdateManager = Ext.Element.prototype.getUpdater;
// private
Ext.Element.uncache = function(el){
for(var i = 0, a = arguments, len = a.length; i < len; i++) {
if(a[i]){
delete Ext.Element.cache[a[i].id || a[i]];
}
}
};/**
* @class Ext.Element
*/
Ext.Element.addMethods({
/**
* 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}
* for details on supported anchor positions.
* @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead
* of page coordinates
* @param {Object} size (optional) An object containing the size to use for calculating anchor position
* {width: (target width), height: (target height)} (defaults to the element's current size)
* @return {Array} [x, y] An array containing the element's x and y coordinates
*/
getAnchorXY : function(anchor, local, s){
//Passing a different size is useful for pre-calculating anchors,
//especially for anchored animations that change the el size.
anchor = (anchor || "tl").toLowerCase();
s = s || {};
var me = this,
vp = me.dom == document.body || me.dom == document,
w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(),
h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(),
xy,
r = Math.round,
o = me.getXY(),
scroll = me.getScroll(),
extraX = vp ? scroll.left : !local ? o[0] : 0,
extraY = vp ? scroll.top : !local ? o[1] : 0,
hash = {
c : [r(w * 0.5), r(h * 0.5)],
t : [r(w * 0.5), 0],
l : [0, r(h * 0.5)],
r : [w, r(h * 0.5)],
b : [r(w * 0.5), h],
tl : [0, 0],
bl : [0, h],
br : [w, h],
tr : [w, 0]
};
xy = hash[anchor];
return [xy[0] + extraX, xy[1] + extraY];
},
/**
* Anchors an element to another element and realigns it when the window is resized.
* @param {Mixed} 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 for the default animation or a standard Element animation config object
* @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
* is a number, it is used as the buffer delay (defaults to 50ms).
* @param {Function} callback The function to call after the animation finishes
* @return {Ext.Element} this
*/
anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
var me = this,
dom = me.dom;
function action(){
Ext.fly(dom).alignTo(el, alignment, offsets, animate);
Ext.callback(callback, Ext.fly(dom));
}
Ext.EventManager.onWindowResize(action, me);
if(!Ext.isEmpty(monitorScroll)){
Ext.EventManager.on(window, 'scroll', action, me,
{buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
}
action.call(me); // align immediately
return me;
},
/**
* Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
* supported position values.
* @param {Mixed} element The element to align to.
* @param {String} position The position to align to.
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @return {Array} [x, y]
*/
getAlignToXY : function(el, p, o){
el = Ext.get(el);
if(!el || !el.dom){
throw "Element.alignToXY with an element that doesn't exist";
}
o = o || [0,0];
p = (p == "?" ? "tl-bl?" : (!/-/.test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase();
var me = this,
d = me.dom,
a1,
a2,
x,
y,
//constrain the aligned el to viewport if necessary
w,
h,
r,
dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie
dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie
p1y,
p1x,
p2y,
p2x,
swapY,
swapX,
doc = document,
docElement = doc.documentElement,
docBody = doc.body,
scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,
scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,
c = false, //constrain to viewport
p1 = "",
p2 = "",
m = p.match(/^([a-z]+)-([a-z]+)(?)?$/);
if(!m){
throw "Element.alignTo with an invalid alignment " + p;
}
p1 = m[1];
p2 = m[2];
c = !!m[3];
//Subtract the aligned el's internal xy from the target's offset xy
//plus custom offset to get the aligned el's new offset xy
a1 = me.getAnchorXY(p1, true);
a2 = el.getAnchorXY(p2, false);
x = a2[0] - a1[0] + o[0];
y = a2[1] - a1[1] + o[1];
if(c){
w = me.getWidth();
h = me.getHeight();
r = el.getRegion();
//If we are at a viewport boundary and the aligned el is anchored on a target border that is
//perpendicular to the vp border, allow the aligned el to slide on that border,
//otherwise swap the aligned el to the opposite border of the target.
p1y = p1.charAt(0);
p1x = p1.charAt(p1.length-1);
p2y = p2.charAt(0);
p2x = p2.charAt(p2.length-1);
swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
if (x + w > dw + scrollX) {
x = swapX ? r.left-w : dw+scrollX-w;
}
if (x < scrollX) {
x = swapX ? r.right : scrollX;
}
if (y + h > dh + scrollY) {
y = swapY ? r.top-h : dh+scrollY-h;
}
if (y < scrollY){
y = swapY ? r.bottom : scrollY;
}
}
return [x,y];
},
/**
* Aligns this element with 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 in 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 in 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 if necessary. Note that the element being aligned might be swapped to align to a different position than
* that specified in order to enforce the viewport constraints.
* Following are all of the supported anchor positions:
<pre>
Value Description
----- -----------------------------
tl The top left corner (default)
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>
// align el to other-el using the default positioning ("tl-bl", non-constrained)
el.alignTo("other-el");
// align the top left corner of el with the top right corner of other-el (constrained to viewport)
el.alignTo("other-el", "tr?");
// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");
// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);
</code></pre>
* @param {Mixed} 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 for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
alignTo : function(element, position, offsets, animate){
var me = this;
return me.setXY(me.getAlignToXY(element, position, offsets),
me.preanim && !!animate ? me.preanim(arguments, 3) : false);
},
// private ==> used outside of core
adjustForConstraints : function(xy, parent, offsets){
return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
},
// private ==> used outside of core
getConstrainToXY : function(el, local, offsets, proposedXY){
var os = {top:0, left:0, bottom:0, right: 0};
return function(el, local, offsets, proposedXY){
el = Ext.get(el);
offsets = offsets ? Ext.applyIf(offsets, os) : os;
var vw, vh, vx = 0, vy = 0;
if(el.dom == document.body || el.dom == document){
vw =Ext.lib.Dom.getViewWidth();
vh = Ext.lib.Dom.getViewHeight();
}else{
vw = el.dom.clientWidth;
vh = el.dom.clientHeight;
if(!local){
var vxy = el.getXY();
vx = vxy[0];
vy = vxy[1];
}
}
var s = el.getScroll();
vx += offsets.left + s.left;
vy += offsets.top + s.top;
vw -= offsets.right;
vh -= offsets.bottom;
var vr = vx+vw;
var vb = vy+vh;
var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
var x = xy[0], y = xy[1];
var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
// only move it if it needs it
var moved = false;
// first validate right/bottom
if((x + w) > vr){
x = vr - w;
moved = true;
}
if((y + h) > vb){
y = vb - h;
moved = true;
}
// then make sure top/left isn't negative
if(x < vx){
x = vx;
moved = true;
}
if(y < vy){
y = vy;
moved = true;
}
return moved ? [x, y] : false;
};
}(),
// el = Ext.get(el);
// offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0});
// var me = this,
// doc = document,
// s = el.getScroll(),
// vxy = el.getXY(),
// vx = offsets.left + s.left,
// vy = offsets.top + s.top,
// vw = -offsets.right,
// vh = -offsets.bottom,
// vr,
// vb,
// xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]),
// x = xy[0],
// y = xy[1],
// w = me.dom.offsetWidth, h = me.dom.offsetHeight,
// moved = false; // only move it if it needs it
//
//
// if(el.dom == doc.body || el.dom == doc){
// vw += Ext.lib.Dom.getViewWidth();
// vh += Ext.lib.Dom.getViewHeight();
// }else{
// vw += el.dom.clientWidth;
// vh += el.dom.clientHeight;
// if(!local){
// vx += vxy[0];
// vy += vxy[1];
// }
// }
// // first validate right/bottom
// if(x + w > vx + vw){
// x = vx + vw - w;
// moved = true;
// }
// if(y + h > vy + vh){
// y = vy + vh - h;
// moved = true;
// }
// // then make sure top/left isn't negative
// if(x < vx){
// x = vx;
// moved = true;
// }
// if(y < vy){
// y = vy;
// moved = true;
// }
// return moved ? [x, y] : false;
// },
/**
* Calculates the x, y to center this element on the screen
* @return {Array} The x, y values [x, y]
*/
getCenterXY : function(){
return this.getAlignToXY(document, 'c-c');
},
/**
* Centers the Element in either the viewport, or another Element.
* @param {Mixed} centerIn (optional) The element in which to center the element.
*/
center : function(centerIn){
return this.alignTo(centerIn || document, 'c-c');
}
});
/**
* @class Ext.Element
*/
Ext.Element.addMethods(function(){
var PARENTNODE = 'parentNode',
NEXTSIBLING = 'nextSibling',
PREVIOUSSIBLING = 'previousSibling',
DQ = Ext.DomQuery,
GET = Ext.get;
return {
/**
* Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
* @param {String} selector The simple selector to test
* @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 50 || document.body)
* @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
* @return {HTMLElement} The matching DOM node (or null if no match was found)
*/
findParent : function(simpleSelector, maxDepth, returnEl){
var p = this.dom,
b = document.body,
depth = 0,
stopEl;
if(Ext.isGecko && Object.prototype.toString.call(p) == '[object XULElement]') {
return null;
}
maxDepth = maxDepth || 50;
if (isNaN(maxDepth)) {
stopEl = Ext.getDom(maxDepth);
maxDepth = Number.MAX_VALUE;
}
while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
if(DQ.is(p, simpleSelector)){
return returnEl ? GET(p) : p;
}
depth++;
p = p.parentNode;
}
return null;
},
/**
* Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
* @param {String} selector The simple selector to test
* @param {Number/Mixed} maxDepth (optional) The max depth to
search as a number or element (defaults to 10 || document.body)
* @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
* @return {HTMLElement} The matching DOM node (or null if no match was found)
*/
findParentNode : function(simpleSelector, maxDepth, returnEl){
var p = Ext.fly(this.dom.parentNode, '_internal');
return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
},
/**
* Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
* This is a shortcut for findParentNode() that always returns an Ext.Element.
* @param {String} selector The simple selector to test
* @param {Number/Mixed} maxDepth (optional) The max depth to
search as a number or element (defaults to 10 || document.body)
* @return {Ext.Element} The matching DOM node (or null if no match was found)
*/
up : function(simpleSelector, maxDepth){
return this.findParentNode(simpleSelector, maxDepth, true);
},
/**
* Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
* @param {String} selector The CSS selector
* @param {Boolean} unique (optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object)
* @return {CompositeElement/CompositeElementLite} The composite element
*/
select : function(selector, unique){
return Ext.Element.select(selector, unique, this.dom);
},
/**
* Selects child nodes based on the passed CSS selector (the selector should not contain an id).
* @param {String} selector The CSS selector
* @return {Array} An array of the matched nodes
*/
query : function(selector, unique){
return DQ.select(selector, this.dom);
},
/**
* Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
* @param {String} selector The CSS selector
* @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.Element (defaults to false)
* @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true)
*/
child : function(selector, returnDom){
var n = DQ.selectNode(selector, this.dom);
return returnDom ? n : GET(n);
},
/**
* 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 (optional) True to return the DOM node instead of Ext.Element (defaults to false)
* @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true)
*/
down : function(selector, returnDom){
var n = DQ.selectNode(" > " + selector, this.dom);
return returnDom ? n : GET(n);
},
/**
* Gets the parent node for this element, optionally chaining up trying to match a selector
* @param {String} selector (optional) Find a parent node that matches the passed simple selector
* @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
* @return {Ext.Element/HTMLElement} The parent node or null
*/
parent : function(selector, returnDom){
return this.matchNode(PARENTNODE, PARENTNODE, selector, returnDom);
},
/**
* Gets the next sibling, skipping text nodes
* @param {String} selector (optional) Find the next sibling that matches the passed simple selector
* @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
* @return {Ext.Element/HTMLElement} The next sibling or null
*/
next : function(selector, returnDom){
return this.matchNode(NEXTSIBLING, NEXTSIBLING, selector, returnDom);
},
/**
* Gets the previous sibling, skipping text nodes
* @param {String} selector (optional) Find the previous sibling that matches the passed simple selector
* @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
* @return {Ext.Element/HTMLElement} The previous sibling or null
*/
prev : function(selector, returnDom){
return this.matchNode(PREVIOUSSIBLING, PREVIOUSSIBLING, selector, returnDom);
},
/**
* Gets the first child, skipping text nodes
* @param {String} selector (optional) Find the next sibling that matches the passed simple selector
* @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
* @return {Ext.Element/HTMLElement} The first child or null
*/
first : function(selector, returnDom){
return this.matchNode(NEXTSIBLING, 'firstChild', selector, returnDom);
},
/**
* Gets the last child, skipping text nodes
* @param {String} selector (optional) Find the previous sibling that matches the passed simple selector
* @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
* @return {Ext.Element/HTMLElement} The last child or null
*/
last : function(selector, returnDom){
return this.matchNode(PREVIOUSSIBLING, 'lastChild', selector, returnDom);
},
matchNode : function(dir, start, selector, returnDom){
var n = this.dom[start];
while(n){
if(n.nodeType == 1 && (!selector || DQ.is(n, selector))){
return !returnDom ? GET(n) : n;
}
n = n[dir];
}
return null;
}
}
}());/**
* @class Ext.Element
*/
Ext.Element.addMethods(
function() {
var GETDOM = Ext.getDom,
GET = Ext.get,
DH = Ext.DomHelper,
isEl = function(el){
return (el.nodeType || el.dom || typeof el == 'string');
};
return {
/**
* Appends the passed element(s) to this element
* @param {String/HTMLElement/Array/Element/CompositeElement} el
* @return {Ext.Element} this
*/
appendChild: function(el){
return GET(el).appendTo(this);
},
/**
* Appends this element to the passed element
* @param {Mixed} el The new parent element
* @return {Ext.Element} this
*/
appendTo: function(el){
GETDOM(el).appendChild(this.dom);
return this;
},
/**
* Inserts this element before the passed element in the DOM
* @param {Mixed} el The element before which this element will be inserted
* @return {Ext.Element} this
*/
insertBefore: function(el){
(el = GETDOM(el)).parentNode.insertBefore(this.dom, el);
return this;
},
/**
* Inserts this element after the passed element in the DOM
* @param {Mixed} el The element to insert after
* @return {Ext.Element} this
*/
insertAfter: function(el){
(el = GETDOM(el)).parentNode.insertBefore(this.dom, el.nextSibling);
return this;
},
/**
* Inserts (or creates) an element (or DomHelper config) as the first child of this element
* @param {Mixed/Object} el The id or element to insert or a DomHelper config to create and insert
* @return {Ext.Element} The new child
*/
insertFirst: function(el, returnDom){
el = el || {};
if(isEl(el)){ // element
el = GETDOM(el);
this.dom.insertBefore(el, this.dom.firstChild);
return !returnDom ? GET(el) : el;
}else{ // dh config
return this.createChild(el, this.dom.firstChild, returnDom);
}
},
/**
* Replaces the passed element with this element
* @param {Mixed} el The element to replace
* @return {Ext.Element} this
*/
replace: function(el){
el = GET(el);
this.insertBefore(el);
el.remove();
return this;
},
/**
* Replaces this element with the passed element
* @param {Mixed/Object} el The new element or a DomHelper config of an element to create
* @return {Ext.Element} this
*/
replaceWith: function(el){
var me = this,
Element = Ext.Element;
if(isEl(el)){
el = GETDOM(el);
me.dom.parentNode.insertBefore(el, me.dom);
}else{
el = DH.insertBefore(me.dom, el);
}
delete Element.cache[me.id];
Ext.removeNode(me.dom);
me.id = Ext.id(me.dom = el);
return Element.cache[me.id] = me;
},
/**
* Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
* @param {Object} config DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be
* automatically generated with the specified attributes.
* @param {HTMLElement} insertBefore (optional) a child element of this element
* @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
* @return {Ext.Element} The new child element
*/
createChild: function(config, insertBefore, returnDom){
config = config || {tag:'div'};
return insertBefore ?
DH.insertBefore(insertBefore, config, returnDom !== true) :
DH[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config, returnDom !== true);
},
/**
* Creates and wraps this element with another element
* @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
* @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element
* @return {HTMLElement/Element} The newly created wrapper element
*/
wrap: function(config, returnDom){
var newEl = DH.insertBefore(this.dom, config || {tag: "div"}, !returnDom);
newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);
return newEl;
},
/**
* Inserts an html fragment into this element
* @param {String} where Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
* @param {String} html The HTML fragment
* @param {Boolean} returnEl (optional) True to return an Ext.Element (defaults to false)
* @return {HTMLElement/Ext.Element} The inserted node (or nearest related if more than 1 inserted)
*/
insertHtml : function(where, html, returnEl){
var el = DH.insertHtml(where, this.dom, html);
return returnEl ? Ext.get(el) : el;
}
}
}());/**
* @class Ext.Element
*/
Ext.apply(Ext.Element.prototype, function() {
var GETDOM = Ext.getDom,
GET = Ext.get,
DH = Ext.DomHelper;
return {
/**
* Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
* @param {Mixed/Object/Array} el The id, element to insert or a DomHelper config to create and insert *or* an array of any of those.
* @param {String} where (optional) 'before' or 'after' defaults to before
* @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element
* @return {Ext.Element} the inserted Element
*/
insertSibling: function(el, where, returnDom){
var me = this,
rt;
if(Ext.isArray(el)){
Ext.each(el, function(e) {
rt = me.insertSibling(e, where, returnDom);
});
return rt;
}
where = (where || 'before').toLowerCase();
el = el || {};
if(el.nodeType || el.dom){
rt = me.dom.parentNode.insertBefore(GETDOM(el), where == 'before' ? me.dom : me.dom.nextSibling);
if (!returnDom) {
rt = GET(rt);
}
}else{
if (where == 'after' && !me.dom.nextSibling) {
rt = DH.append(me.dom.parentNode, el, !returnDom);
} else {
rt = DH[where == 'after' ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
}
}
return rt;
}
};
}());/**
* @class Ext.Element
*/
Ext.Element.addMethods(function(){
// local style camelizing for speed
var propCache = {},
camelRe = /(-[a-z])/gi,
classReCache = {},
view = document.defaultView,
propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat',
opacityRe = /alpha(opacity=(.*))/i,
trimRe = /^s+|s+$/g,
EL = Ext.Element,
PADDING = "padding",
MARGIN = "margin",
BORDER = "border",
LEFT = "-left",
RIGHT = "-right",
TOP = "-top",
BOTTOM = "-bottom",
WIDTH = "-width",
MATH = Math,
HIDDEN = 'hidden',
ISCLIPPED = 'isClipped',
OVERFLOW = 'overflow',
OVERFLOWX = 'overflow-x',
OVERFLOWY = 'overflow-y',
ORIGINALCLIP = 'originalClip',
// special markup used throughout Ext when box wrapping elements
borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
data = Ext.Element.data;
// private
function camelFn(m, a) {
return a.charAt(1).toUpperCase();
}
// private (needs to be called => addStyles.call(this, sides, styles))
function addStyles(sides, styles){
var val = 0;
Ext.each(sides.match(/w/g), function(s) {
if (s = parseInt(this.getStyle(styles[s]), 10)) {
val += MATH.abs(s);
}
},
this);
return val;
}
function chkCache(prop) {
return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn));
}
return {
// private ==> used by Fx
adjustWidth : function(width) {
var me = this;
var isNum = (typeof width == "number");
if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
}
return (isNum && width < 0) ? 0 : width;
},
// private ==> used by Fx
adjustHeight : function(height) {
var me = this;
var isNum = (typeof height == "number");
if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
}
return (isNum && height < 0) ? 0 : height;
},
/**
* Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
* @param {String/Array} className The CSS class to add, or an array of classes
* @return {Ext.Element} this
*/
addClass : function(className){
var me = this;
Ext.each(className, function(v) {
me.dom.className += (!me.hasClass(v) && v ? " " + v : "");
});
return me;
},
/**
* Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
* @param {String/Array} className The CSS class to add, or an array of classes
* @return {Ext.Element} this
*/
radioClass : function(className){
Ext.each(this.dom.parentNode.childNodes, function(v) {
if(v.nodeType == 1) {
Ext.fly(v, '_internal').removeClass(className);
}
});
return this.addClass(className);
},
/**
* Removes one or more CSS classes from the element.
* @param {String/Array} className The CSS class to remove, or an array of classes
* @return {Ext.Element} this
*/
removeClass : function(className){
var me = this;
if (me.dom.className) {
Ext.each(className, function(v) {
me.dom.className = me.dom.className.replace(
classReCache[v] = classReCache[v] || new RegExp('(?:^|\s+)' + v + '(?:\s+|$)', "g"),
" ");
});
}
return me;
},
/**
* Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
* @param {String} className The CSS class to toggle
* @return {Ext.Element} this
*/
toggleClass : function(className){
return this.hasClass(className) ? this.removeClass(className) : this.addClass(className);
},
/**
* Checks if the specified CSS class exists on this element's DOM node.
* @param {String} className The CSS class to check for
* @return {Boolean} True if the class exists, else false
*/
hasClass : function(className){
return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
},
/**
* Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
* @param {String} oldClassName The CSS class to replace
* @param {String} newClassName The replacement CSS class
* @return {Ext.Element} this
*/
replaceClass : function(oldClassName, newClassName){
return this.removeClass(oldClassName).addClass(newClassName);
},
isStyle : function(style, val) {
return this.getStyle(style) == val;
},
/**
* Normalizes currentStyle and computedStyle.
* @param {String} property The style property whose value is returned.
* @return {String} The current value of the style property for this element.
*/
getStyle : function(){
return view && view.getComputedStyle ?
function(prop){
var el = this.dom,
v,
cs;
if(el == document) return null;
prop = chkCache(prop);
return (v = el.style[prop]) ? v :
(cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
} :
function(prop){
var el = this.dom,
m,
cs;
if(el == document) return null;
if (prop == 'opacity') {
if (el.style.filter.match) {
if(m = el.style.filter.match(opacityRe)){
var fv = parseFloat(m[1]);
if(!isNaN(fv)){
return fv ? fv / 100 : 0;
}
}
}
return 1;
}
prop = chkCache(prop);
return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
};
}(),
/**
* Return the CSS color for 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 default value to use when a valid color isn't found
* @param {String} prefix (optional) defaults to #. Use an empty string when working with
* color anims.
*/
getColor : function(attr, defaultValue, prefix){
var v = this.getStyle(attr),
color = prefix || '#',
h;
if(!v || /transparent|inherit/.test(v)){
return defaultValue;
}
if(/^r/.test(v)){
Ext.each(v.slice(4, v.length -1).split(','), function(s){
h = parseInt(s, 10);
color += (h < 16 ? '0' : '') + h.toString(16);
});
}else{
v = v.replace('#', '');
color += v.length == 3 ? v.replace(/^(w)(w)(w)$/, '$1$1$2$2$3$3') : v;
}
return(color.length > 5 ? color.toLowerCase() : defaultValue);
},
/**
* Wrapper for 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} value (optional) The value to apply to the given property, or null if an object was passed.
* @return {Ext.Element} this
*/
setStyle : function(prop, value){
var tmp,
style,
camel;
if (!Ext.isObject(prop)) {
tmp = {};
tmp[prop] = value;
prop = tmp;
}
for (style in prop) {
value = prop[style];
style == 'opacity' ?
this.setOpacity(value) :
this.dom.style[chkCache(style)] = value;
}
return this;
},
/**
* Set the opacity of the element
* @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
* @param {Boolean/Object} animate (optional) a standard Element animation config object or <tt>true</tt> for
* the default animation (<tt>{duration: .35, easing: 'easeIn'}</tt>)
* @return {Ext.Element} this
*/
setOpacity : function(opacity, animate){
var me = this,
s = me.dom.style;
if(!animate || !me.anim){
if(Ext.isIE){
var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '',
val = s.filter.replace(opacityRe, '').replace(trimRe, '');
s.zoom = 1;
s.filter = val + (val.length > 0 ? ' ' : '') + opac;
}else{
s.opacity = opacity;
}
}else{
me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn');
}
return me;
},
/**
* Clears any opacity settings from this element. Required in some cases for IE.
* @return {Ext.Element} this
*/
clearOpacity : function(){
var style = this.dom.style;
if(Ext.isIE){
if(!Ext.isEmpty(style.filter)){
style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
}
}else{
style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
}
return this;
},
/**
* Returns the offset height of the element
* @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
* @return {Number} The element's height
*/
getHeight : function(contentHeight){
var me = this,
dom = me.dom,
h = MATH.max(dom.offsetHeight, dom.clientHeight) || 0;
h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb");
return h < 0 ? 0 : h;
},
/**
* Returns the offset width of the element
* @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
* @return {Number} The element's width
*/
getWidth : function(contentWidth){
var me = this,
dom = me.dom,
w = MATH.max(dom.offsetWidth, dom.clientWidth) || 0;
w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
return w < 0 ? 0 : w;
},
/**
* Set the width of this Element.
* @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
* <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
* </ul></div>
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
setWidth : function(width, animate){
var me = this;
width = me.adjustWidth(width);
!animate || !me.anim ?
me.dom.style.width = me.addUnits(width) :
me.anim({width : {to : width}}, me.preanim(arguments, 1));
return me;
},
/**
* Set the height of this Element.
* <pre><code>
// change the height to 200px and animate with default configuration
Ext.fly('elementId').setHeight(200, true);
// change the height to 150px and animate with a custom configuration
Ext.fly('elId').setHeight(150, {
duration : .5, // animation will have a duration of .5 seconds
// will change the content to "finished"
callback: function(){ this.{@link #update}("finished"); }
});
* </code></pre>
* @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)</li>
* <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
* </ul></div>
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
setHeight : function(height, animate){
var me = this;
height = me.adjustHeight(height);
!animate || !me.anim ?
me.dom.style.height = me.addUnits(height) :
me.anim({height : {to : height}}, me.preanim(arguments, 1));
return me;
},
/**
* Gets the width of the border(s) for 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 <tt>'lr'</tt> would get the border <b><u>l</u></b>eft width + the border <b><u>r</u></b>ight width.
* @return {Number} The width of the sides passed added together
*/
getBorderWidth : function(side){
return addStyles.call(this, side, borders);
},
/**
* Gets the width of the padding(s) for 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 <tt>'lr'</tt> would get the padding <b><u>l</u></b>eft + the padding <b><u>r</u></b>ight.
* @return {Number} The padding of the sides passed added together
*/
getPadding : function(side){
return addStyles.call(this, side, paddings);
},
/**
* Store the current overflow setting and clip overflow on the element - use <tt>{@link #unclip}</tt> to remove
* @return {Ext.Element} this
*/
clip : function(){
var me = this,
dom = me.dom;
if(!data(dom, ISCLIPPED)){
data(dom, ISCLIPPED, true);
data(dom, ORIGINALCLIP, {
o: me.getStyle(OVERFLOW),
x: me.getStyle(OVERFLOWX),
y: me.getStyle(OVERFLOWY)
});
me.setStyle(OVERFLOW, HIDDEN);
me.setStyle(OVERFLOWX, HIDDEN);
me.setStyle(OVERFLOWY, HIDDEN);
}
return me;
},
/**
* Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called
* @return {Ext.Element} this
*/
unclip : function(){
var me = this,
dom = me.dom;
if(data(dom, ISCLIPPED)){
data(dom, ISCLIPPED, false);
var o = data(dom, ORIGINALCLIP);
if(o.o){
me.setStyle(OVERFLOW, o.o);
}
if(o.x){
me.setStyle(OVERFLOWX, o.x);
}
if(o.y){
me.setStyle(OVERFLOWY, o.y);
}
}
return me;
},
addStyles : addStyles,
margins : margins
}
}()
);/**
* @class Ext.Element
*/
// special markup used throughout Ext when box wrapping elements
Ext.Element.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>';
Ext.Element.addMethods(function(){
var INTERNAL = "_internal";
return {
/**
* More flexible version of {@link #setStyle} for setting style properties.
* @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
* a function which returns such a specification.
* @return {Ext.Element} this
*/
applyStyles : function(style){
Ext.DomHelper.applyStyles(this.dom, style);
return this;
},
/**
* Returns an object with properties matching the styles requested.
* For example, el.getStyles('color', 'font-size', 'width') might return
* {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
* @param {String} style1 A style name
* @param {String} style2 A style name
* @param {String} etc.
* @return {Object} The style object
*/
getStyles : function(){
var ret = {};
Ext.each(arguments, function(v) {
ret[v] = this.getStyle(v);
},
this);
return ret;
},
getStyleSize : function(){
var me = this,
w,
h,
d = this.dom,
s = d.style;
if(s.width && s.width != 'auto'){
w = parseInt(s.width, 10);
if(me.isBorderBox()){
w -= me.getFrameWidth('lr');
}
}
if(s.height && s.height != 'auto'){
h = parseInt(s.height, 10);
if(me.isBorderBox()){
h -= me.getFrameWidth('tb');
}
}
return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
},
// private ==> used by ext full
setOverflow : function(v){
var dom = this.dom;
if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
dom.style.overflow = 'hidden';
(function(){dom.style.overflow = 'auto';}).defer(1);
}else{
dom.style.overflow = v;
}
},
/**
* <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as
* a gray container with a gradient background, rounded corners and a 4-way shadow.</p>
* <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},
* {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}). The markup
* is of this form:</p>
* <pre><code>
Ext.Element.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>';
* </code></pre>
* <p>Example usage:</p>
* <pre><code>
// Basic box wrap
Ext.get("foo").boxWrap();
// You can also add a custom class and use CSS inheritance rules to customize the box look.
// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
// for how to create a custom box wrap style.
Ext.get("foo").boxWrap().addClass("x-box-blue");
* </code></pre>
* @param {String} class (optional) A base CSS class to apply to the containing wrapper element
* (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on
* this name to make the overall effect work, so if you supply an alternate base class, make sure you
* also supply all of the necessary rules.
* @return {Ext.Element} this
*/
boxWrap : function(cls){
cls = cls || 'x-box';
var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>")); //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));
Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
return el;
},
/**
* Set the size of this Element. If animation is true, both width and height will be animated concurrently.
* @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
* <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
* <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>
* </ul></div>
* @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li>
* <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
* </ul></div>
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
setSize : function(width, height, animate){
var me = this;
if(Ext.isObject(width)){ // in case of object from getSize()
height = width.height;
width = width.width;
}
width = me.adjustWidth(width);
height = me.adjustHeight(height);
if(!animate || !me.anim){
me.dom.style.width = me.addUnits(width);
me.dom.style.height = me.addUnits(height);
}else{
me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));
}
return me;
},
/**
* Returns either the offsetHeight or the height of this 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
* if a height has not been set using CSS.
* @return {Number}
*/
getComputedHeight : function(){
var me = this,
h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
if(!h){
h = parseInt(me.getStyle('height'), 10) || 0;
if(!me.isBorderBox()){
h += me.getFrameWidth('tb');
}
}
return h;
},
/**
* Returns either the offsetWidth or the width of this 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
* if a width has not been set using CSS.
* @return {Number}
*/
getComputedWidth : function(){
var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
if(!w){
w = parseInt(this.getStyle('width'), 10) || 0;
if(!this.isBorderBox()){
w += this.getFrameWidth('lr');
}
}
return w;
},
/**
* Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
for more information about the sides.
* @param {String} sides
* @return {Number}
*/
getFrameWidth : function(sides, onlyContentBox){
return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
},
/**
* Sets up event handlers to add and remove a css class when the mouse is over this element
* @param {String} className
* @return {Ext.Element} this
*/
addClassOnOver : function(className){
this.hover(
function(){
Ext.fly(this, INTERNAL).addClass(className);
},
function(){
Ext.fly(this, INTERNAL).removeClass(className);
}
);
return this;
},
/**
* Sets up event handlers to add and remove a css class when this element has the focus
* @param {String} className
* @return {Ext.Element} this
*/
addClassOnFocus : function(className){
this.on("focus", function(){
Ext.fly(this, INTERNAL).addClass(className);
}, this.dom);
this.on("blur", function(){
Ext.fly(this, INTERNAL).removeClass(className);
}, this.dom);
return this;
},
/**
* Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
* @param {String} className
* @return {Ext.Element} this
*/
addClassOnClick : function(className){
var dom = this.dom;
this.on("mousedown", function(){
Ext.fly(dom, INTERNAL).addClass(className);
var d = Ext.getDoc(),
fn = function(){
Ext.fly(dom, INTERNAL).removeClass(className);
d.removeListener("mouseup", fn);
};
d.on("mouseup", fn);
});
return this;
},
/**
* Returns the width and height of the viewport.
* <pre><code>
var vpSize = Ext.getBody().getViewSize();
// all Windows created afterwards will have a default value of 90% height and 95% width
Ext.Window.override({
width: vpSize.width * 0.9,
height: vpSize.height * 0.95
});
// To handle window resizing you would have to hook onto onWindowResize.
</code></pre>
* @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
*/
getViewSize : function(){
var doc = document,
d = this.dom,
extdom = Ext.lib.Dom,
isDoc = (d == doc || d == doc.body);
return { width : (isDoc ? extdom.getViewWidth() : d.clientWidth),
height : (isDoc ? extdom.getViewHeight() : d.clientHeight) };
},
/**
* Returns the size of the element.
* @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
* @return {Object} An object containing the element's size {width: (element width), height: (element height)}
*/
getSize : function(contentSize){
return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
},
/**
* Forces the browser to repaint this element
* @return {Ext.Element} this
*/
repaint : function(){
var dom = this.dom;
this.addClass("x-repaint");
setTimeout(function(){
Ext.fly(dom).removeClass("x-repaint");
}, 1);
return this;
},
/**
* Disables text selection for this element (normalized across browsers)
* @return {Ext.Element} this
*/
unselectable : function(){
this.dom.unselectable = "on";
return this.swallowEvent("selectstart", true).
applyStyles("-moz-user-select:none;-khtml-user-select:none;").
addClass("x-unselectable");
},
/**
* Returns an object with properties top, left, right and bottom representing the margins of this 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
* @return {Object/Number}
*/
getMargins : function(side){
var me = this,
key,
hash = {t:"top", l:"left", r:"right", b: "bottom"},
o = {};
if (!side) {
for (key in me.margins){
o[hash[key]] = parseInt(me.getStyle(me.margins[key]), 10) || 0;
}
return o;
} else {
return me.addStyles.call(me, side, me.margins);
}
}
};
}());/**
* @class Ext.Element
*/
(function(){
var D = Ext.lib.Dom,
LEFT = "left",
RIGHT = "right",
TOP = "top",
BOTTOM = "bottom",
POSITION = "position",
STATIC = "static",
RELATIVE = "relative",
AUTO = "auto",
ZINDEX = "z-index";
function animTest(args, animate, i) {
return this.preanim && !!animate ? this.preanim(args, i) : false
}
Ext.Element.addMethods({
/**
* 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 return false).
* @return {Number} The X position of the element
*/
getX : function(){
return D.getX(this.dom);
},
/**
* 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 return false).
* @return {Number} The Y position of the element
*/
getY : function(){
return D.getY(this.dom);
},
/**
* 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 return false).
* @return {Array} The XY position of the element
*/
getXY : function(){
return D.getXY(this.dom);
},
/**
* Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have display:none to have page coordinates.
* @param {Mixed} element The element to get the offsets from.
* @return {Array} The XY page offsets (e.g. [100, -200])
*/
getOffsetsTo : function(el){
var o = this.getXY(),
e = Ext.fly(el, '_internal').getXY();
return [o[0]-e[0],o[1]-e[1]];
},
/**
* 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 return false).
* @param {Number} The X position of the element
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
setX : function(x, animate){
return this.setXY([x, this.getY()], animTest.call(this, arguments, animate, 1));
},
/**
* 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 return false).
* @param {Number} The Y position of the element
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
setY : function(y, animate){
return this.setXY([this.getX(), y], animTest.call(this, arguments, animate, 1));
},
/**
* Sets the element's left position directly using CSS style (instead of {@link #setX}).
* @param {String} left The left CSS property value
* @return {Ext.Element} this
*/
setLeft : function(left){
this.setStyle(LEFT, this.addUnits(left));
return this;
},
/**
* Sets the element's top position directly using CSS style (instead of {@link #setY}).
* @param {String} top The top CSS property value
* @return {Ext.Element} this
*/
setTop : function(top){
this.setStyle(TOP, this.addUnits(top));
return this;
},
/**
* Sets the element's CSS right style.
* @param {String} right The right CSS property value
* @return {Ext.Element} this
*/
setRight : function(right){
this.setStyle(RIGHT, this.addUnits(right));
return this;
},
/**
* Sets the element's CSS bottom style.
* @param {String} bottom The bottom CSS property value
* @return {Ext.Element} this
*/
setBottom : function(bottom){
this.setStyle(BOTTOM, this.addUnits(bottom));
return this;
},
/**
* Sets the position of the element in 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 return false).
* @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
setXY : function(pos, animate){
var me = this;
if(!animate || !me.anim){
D.setXY(me.dom, pos);
}else{
me.anim({points: {to: pos}}, me.preanim(arguments, 1), 'motion');
}
return me;
},
/**
* Sets the position of the element in 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 return false).
* @param {Number} x X value for new position (coordinates are page-based)
* @param {Number} y Y value for new position (coordinates are page-based)
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
setLocation : function(x, y, animate){
return this.setXY([x, y], animTest.call(this, arguments, animate, 2));
},
/**
* Sets the position of the element in 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 return false).
* @param {Number} x X value for new position (coordinates are page-based)
* @param {Number} y Y value for new position (coordinates are page-based)
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
moveTo : function(x, y, animate){
return this.setXY([x, y], animTest.call(this, arguments, animate, 2));
},
/**
* Gets the left X coordinate
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getLeft : function(local){
return !local ? this.getX() : parseInt(this.getStyle(LEFT), 10) || 0;
},
/**
* 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
* @return {Number}
*/
getRight : function(local){
var me = this;
return !local ? me.getX() + me.getWidth() : (me.getLeft(true) + me.getWidth()) || 0;
},
/**
* Gets the top Y coordinate
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getTop : function(local) {
return !local ? this.getY() : parseInt(this.getStyle(TOP), 10) || 0;
},
/**
* 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
* @return {Number}
*/
getBottom : function(local){
var me = this;
return !local ? me.getY() + me.getHeight() : (me.getTop(true) + me.getHeight()) || 0;
},
/**
* Initializes positioning on this 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
*/
position : function(pos, zIndex, x, y){
var me = this;
if(!pos && me.isStyle(POSITION, STATIC)){
me.setStyle(POSITION, RELATIVE);