X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/source/core/Element.js
diff --git a/source/core/Element.js b/source/core/Element.js
deleted file mode 100644
index 5ab215f8..00000000
--- a/source/core/Element.js
+++ /dev/null
@@ -1,3062 +0,0 @@
-/*
- * Ext JS Library 2.2.1
- * Copyright(c) 2006-2009, Ext JS, LLC.
- * licensing@extjs.com
- *
- * http://extjs.com/license
- */
-
-/**
- * @class Ext.Element
- * Represents an Element in the DOM.
- * Usage:
-
-// by id
-var el = Ext.get("my-div");
-
-// by DOM element reference
-var el = Ext.get(myDivElement);
-
- * Animations-Option Default Description ---------- -------- --------------------------------------------- -duration .35 The duration of the animation in seconds -easing easeOut The easing method -callback none A function to execute when the anim completes -scope this The scope (this) of the callback function --* Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or -* manipulate the animation. Here's an example: -
-var el = Ext.get("my-div");
-
-// no animation
-el.setWidth(100);
-
-// default animation
-el.setWidth(100, true);
-
-// animation with some options set
-el.setWidth(100, {
- duration: 1,
- callback: this.foo,
- scope: this
-});
-
-// using the "anim" property to get the Anim object
-var opt = {
- duration: 1,
- callback: this.foo,
- scope: this
-};
-el.setWidth(100, opt);
-...
-if(opt.anim.isAnimated()){
- opt.anim.stop();
-}
-
-* Composite (Collections of) Elements
- * Combining Options
- * In the following examples, the shorthand form {@link #on} is used rather than the more verbose
- * addListener. The two are equivalent. Using the options argument, it is possible to combine different
- * types of listeners:
- *
- * A normalized, delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
- * options object. The options object is available as the third parameter in the handler function.
-el.on('click', this.onClick, this, {
- single: true,
- delay: 100,
- stopEvent : true,
- forumId: 4
-});
- *
- * Attaching multiple handlers in 1 call
- * The method also allows for a single argument to be passed which is a config object containing properties
- * which specify multiple handlers.
- * Code:
-el.on({
- 'click' : {
- fn: this.onClick,
- scope: this,
- delay: 100
- },
- 'mouseover' : {
- fn: this.onMouseOver,
- scope: this
- },
- 'mouseout' : {
- fn: this.onMouseOut,
- scope: this
- }
-});
- *
- * Or a shorthand syntax:
- * Code:
-el.on({
- 'click' : this.onClick,
- 'mouseover' : this.onMouseOver,
- 'mouseout' : this.onMouseOut,
- scope: this
-});
- */
- addListener : function(eventName, fn, scope, options){
- Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
- },
-
- /**
- * Removes an event handler from this element. The shorthand version {@link #un} is equivalent. Example:
- *
-el.removeListener('click', this.handlerFn);
-// or
-el.un('click', this.handlerFn);
-
- * @param {String} eventName the type of event to remove
- * @param {Function} fn the method the event invokes
- * @param {Object} scope (optional) The scope (The this reference) of the handler function. Defaults
- * to this Element.
- * @return {Ext.Element} this
- */
- removeListener : function(eventName, fn, scope){
- Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this);
- return this;
- },
-
- /**
- * Removes all previous added listeners from this element
- * @return {Ext.Element} this
- */
- removeAllListeners : function(){
- Ext.EventManager.removeAll(this.dom);
- return this;
- },
-
- /**
- * 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);
- });
- },
-
- /**
- * 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) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
- */
- setOpacity : function(opacity, animate){
- if(!animate || !A){
- var s = this.dom.style;
- if(Ext.isIE){
- s.zoom = 1;
- s.filter = (s.filter || '').replace(/alpha\([^\)]*\)/gi,"") +
- (opacity == 1 ? "" : " alpha(opacity=" + opacity * 100 + ")");
- }else{
- s.opacity = opacity;
- }
- }else{
- this.anim({opacity: {to: opacity}}, this.preanim(arguments, 1), null, .35, 'easeIn');
- }
- return this;
- },
-
- /**
- * Gets the left X coordinate
- * @param {Boolean} local True to get the local css position instead of page coordinate
- * @return {Number}
- */
- getLeft : function(local){
- if(!local){
- return this.getX();
- }else{
- return 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){
- if(!local){
- return this.getX() + this.getWidth();
- }else{
- return (this.getLeft(true) + this.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) {
- if(!local){
- return this.getY();
- }else{
- return 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){
- if(!local){
- return this.getY() + this.getHeight();
- }else{
- return (this.getTop(true) + this.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){
- if(!pos){
- if(this.getStyle('position') == 'static'){
- this.setStyle('position', 'relative');
- }
- }else{
- this.setStyle("position", pos);
- }
- if(zIndex){
- this.setStyle("z-index", zIndex);
- }
- if(x !== undefined && y !== undefined){
- this.setXY([x, y]);
- }else if(x !== undefined){
- this.setX(x);
- }else if(y !== undefined){
- this.setY(y);
- }
- },
-
- /**
- * Clear positioning back to the default when the document was loaded
- * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
- * @return {Ext.Element} this
- */
- clearPositioning : function(value){
- value = value ||'';
- this.setStyle({
- "left": value,
- "right": value,
- "top": value,
- "bottom": value,
- "z-index": "",
- "position" : "static"
- });
- return this;
- },
-
- /**
- * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
- * snapshot before performing an update and then restoring the element.
- * @return {Object}
- */
- getPositioning : function(){
- var l = this.getStyle("left");
- var t = this.getStyle("top");
- return {
- "position" : this.getStyle("position"),
- "left" : l,
- "right" : l ? "" : this.getStyle("right"),
- "top" : t,
- "bottom" : t ? "" : this.getStyle("bottom"),
- "z-index" : this.getStyle("z-index")
- };
- },
-
- /**
- * 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 lr would get the border (l)eft width + the border (r)ight width.
- * @return {Number} The width of the sides passed added together
- */
- getBorderWidth : function(side){
- return this.addStyles(side, El.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 lr would get the padding (l)eft + the padding (r)ight.
- * @return {Number} The padding of the sides passed added together
- */
- getPadding : function(side){
- return this.addStyles(side, El.paddings);
- },
-
- /**
- * Set positioning with an object returned by getPositioning().
- * @param {Object} posCfg
- * @return {Ext.Element} this
- */
- setPositioning : function(pc){
- this.applyStyles(pc);
- if(pc.right == "auto"){
- this.dom.style.right = "";
- }
- if(pc.bottom == "auto"){
- this.dom.style.bottom = "";
- }
- return this;
- },
-
- // private
- fixDisplay : function(){
- if(this.getStyle("display") == "none"){
- this.setStyle("visibility", "hidden");
- this.setStyle("display", this.originalDisplay); // first try reverting to default
- if(this.getStyle("display") == "none"){ // if that fails, default to block
- this.setStyle("display", "block");
- }
- }
- },
-
- // private
- setOverflow : function(v){
- if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
- this.dom.style.overflow = 'hidden';
- (function(){this.dom.style.overflow = 'auto';}).defer(1, this);
- }else{
- this.dom.style.overflow = v;
- }
- },
-
- /**
- * Quick set left and top adding default units
- * @param {String} left The left CSS property value
- * @param {String} top The top CSS property value
- * @return {Ext.Element} this
- */
- setLeftTop : function(left, top){
- this.dom.style.left = this.addUnits(left);
- this.dom.style.top = this.addUnits(top);
- return this;
- },
-
- /**
- * Move this element relative to its current position.
- * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
- * @param {Number} distance How far to move the element in pixels
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
- */
- move : function(direction, distance, animate){
- var xy = this.getXY();
- direction = direction.toLowerCase();
- switch(direction){
- case "l":
- case "left":
- this.moveTo(xy[0]-distance, xy[1], this.preanim(arguments, 2));
- break;
- case "r":
- case "right":
- this.moveTo(xy[0]+distance, xy[1], this.preanim(arguments, 2));
- break;
- case "t":
- case "top":
- case "up":
- this.moveTo(xy[0], xy[1]-distance, this.preanim(arguments, 2));
- break;
- case "b":
- case "bottom":
- case "down":
- this.moveTo(xy[0], xy[1]+distance, this.preanim(arguments, 2));
- break;
- }
- return this;
- },
-
- /**
- * Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
- * @return {Ext.Element} this
- */
- clip : function(){
- if(!this.isClipped){
- this.isClipped = true;
- this.originalClip = {
- "o": this.getStyle("overflow"),
- "x": this.getStyle("overflow-x"),
- "y": this.getStyle("overflow-y")
- };
- this.setStyle("overflow", "hidden");
- this.setStyle("overflow-x", "hidden");
- this.setStyle("overflow-y", "hidden");
- }
- return this;
- },
-
- /**
- * Return clipping (overflow) to original clipping before clip() was called
- * @return {Ext.Element} this
- */
- unclip : function(){
- if(this.isClipped){
- this.isClipped = false;
- var o = this.originalClip;
- if(o.o){this.setStyle("overflow", o.o);}
- if(o.x){this.setStyle("overflow-x", o.x);}
- if(o.y){this.setStyle("overflow-y", o.y);}
- }
- return this;
- },
-
-
- /**
- * 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.
-
- var w, h, vp = false;
- if(!s){
- var d = this.dom;
- if(d == document.body || d == document){
- vp = true;
- w = D.getViewWidth(); h = D.getViewHeight();
- }else{
- w = this.getWidth(); h = this.getHeight();
- }
- }else{
- w = s.width; h = s.height;
- }
- var x = 0, y = 0, r = Math.round;
- switch((anchor || "tl").toLowerCase()){
- case "c":
- x = r(w*.5);
- y = r(h*.5);
- break;
- case "t":
- x = r(w*.5);
- y = 0;
- break;
- case "l":
- x = 0;
- y = r(h*.5);
- break;
- case "r":
- x = w;
- y = r(h*.5);
- break;
- case "b":
- x = r(w*.5);
- y = h;
- break;
- case "tl":
- x = 0;
- y = 0;
- break;
- case "bl":
- x = 0;
- y = h;
- break;
- case "br":
- x = w;
- y = h;
- break;
- case "tr":
- x = w;
- y = 0;
- break;
- }
- if(local === true){
- return [x, y];
- }
- if(vp){
- var sc = this.getScroll();
- return [x + sc.left, y + sc.top];
- }
- //Add the element's offset xy
- var o = this.getXY();
- return [x+o[0], y+o[1]];
- },
-
- /**
- * 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";
- }
- var d = this.dom;
- var c = false; //constrain to viewport
- var p1 = "", p2 = "";
- o = o || [0,0];
-
- if(!p){
- p = "tl-bl";
- }else if(p == "?"){
- p = "tl-bl?";
- }else if(p.indexOf("-") == -1){
- p = "tl-" + p;
- }
- p = p.toLowerCase();
- var 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
- var a1 = this.getAnchorXY(p1, true);
- var a2 = el.getAnchorXY(p2, false);
-
- var x = a2[0] - a1[0] + o[0];
- var y = a2[1] - a1[1] + o[1];
-
- if(c){
- //constrain the aligned el to viewport if necessary
- var w = this.getWidth(), h = this.getHeight(), r = el.getRegion();
- // 5px of margin for ie
- var dw = D.getViewWidth()-5, dh = D.getViewHeight()-5;
-
- //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.
- var p1y = p1.charAt(0), p1x = p1.charAt(p1.length-1);
- var p2y = p2.charAt(0), p2x = p2.charAt(p2.length-1);
- var swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
- var swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
-
- var doc = document;
- var scrollX = (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0)+5;
- var scrollY = (doc.documentElement.scrollTop || doc.body.scrollTop || 0)+5;
-
- 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];
- },
-
- // private
- getConstrainToXY : function(){
- 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;
- };
- }(),
-
- // private
- adjustForConstraints : function(xy, parent, offsets){
- return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
- },
-
- /**
- * 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:
- * -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 --Example Usage: -
-// 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]);
-
- * @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 xy = this.getAlignToXY(element, position, offsets);
- this.setXY(xy, this.preanim(arguments, 3));
- return this;
- },
-
- /**
- * 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 action = function(){
- this.alignTo(el, alignment, offsets, animate);
- Ext.callback(callback, this);
- };
- Ext.EventManager.onWindowResize(action, this);
- var tm = typeof monitorScroll;
- if(tm != 'undefined'){
- Ext.EventManager.on(window, 'scroll', action, this,
- {buffer: tm == 'number' ? monitorScroll : 50});
- }
- action.call(this); // align immediately
- return this;
- },
- /**
- * Clears any opacity settings from this element. Required in some cases for IE.
- * @return {Ext.Element} this
- */
- clearOpacity : function(){
- if (window.ActiveXObject) {
- if(typeof this.dom.style.filter == 'string' && (/alpha/i).test(this.dom.style.filter)){
- this.dom.style.filter = "";
- }
- } else {
- this.dom.style.opacity = "";
- this.dom.style["-moz-opacity"] = "";
- this.dom.style["-khtml-opacity"] = "";
- }
- return this;
- },
-
- /**
- * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
- */
- hide : function(animate){
- this.setVisible(false, this.preanim(arguments, 0));
- return this;
- },
-
- /**
- * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
- */
- show : function(animate){
- this.setVisible(true, this.preanim(arguments, 0));
- return this;
- },
-
- /**
- * @private Test if size has a unit, otherwise appends the default
- */
- addUnits : function(size){
- return Ext.Element.addUnits(size, this.defaultUnit);
- },
-
- /**
- * 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){
- if(typeof html == "undefined"){
- html = "";
- }
- if(loadScripts !== true){
- this.dom.innerHTML = html;
- if(typeof callback == "function"){
- callback();
- }
- return this;
- }
- var id = Ext.id();
- var dom = this.dom;
-
- html += '';
-
- E.onAvailable(id, function(){
- var hd = document.getElementsByTagName("head")[0];
- var re = /(?: