- margins : margins
- }
-}()
-);
-/**\r
- * @class Ext.Element\r
- */\r
-\r
-// special markup used throughout Ext when box wrapping elements\r
-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>';\r
-\r
-Ext.Element.addMethods(function(){\r
- var INTERNAL = "_internal",\r
- pxMatch = /(\d+\.?\d+)px/;\r
- return {\r
- /**\r
- * More flexible version of {@link #setStyle} for setting style properties.\r
- * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or\r
- * a function which returns such a specification.\r
- * @return {Ext.Element} this\r
- */\r
- applyStyles : function(style){\r
- Ext.DomHelper.applyStyles(this.dom, style);\r
- return this;\r
- },\r
-\r
- /**\r
- * Returns an object with properties matching the styles requested.\r
- * For example, el.getStyles('color', 'font-size', 'width') might return\r
- * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.\r
- * @param {String} style1 A style name\r
- * @param {String} style2 A style name\r
- * @param {String} etc.\r
- * @return {Object} The style object\r
- */\r
- getStyles : function(){\r
- var ret = {};\r
- Ext.each(arguments, function(v) {\r
- ret[v] = this.getStyle(v);\r
- },\r
- this);\r
- return ret;\r
- },\r
-\r
- // private ==> used by ext full\r
- setOverflow : function(v){\r
- var dom = this.dom;\r
- if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug\r
- dom.style.overflow = 'hidden';\r
- (function(){dom.style.overflow = 'auto';}).defer(1);\r
- }else{\r
- dom.style.overflow = v;\r
- }\r
- },\r
-\r
- /**\r
- * <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as\r
- * a gray container with a gradient background, rounded corners and a 4-way shadow.</p>\r
- * <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},\r
- * {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}). The markup\r
- * is of this form:</p>\r
- * <pre><code>\r
- Ext.Element.boxMarkup =\r
- '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>\r
- <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>\r
- <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';\r
- * </code></pre>\r
- * <p>Example usage:</p>\r
- * <pre><code>\r
- // Basic box wrap\r
- Ext.get("foo").boxWrap();\r
-\r
- // You can also add a custom class and use CSS inheritance rules to customize the box look.\r
- // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example\r
- // for how to create a custom box wrap style.\r
- Ext.get("foo").boxWrap().addClass("x-box-blue");\r
- * </code></pre>\r
- * @param {String} class (optional) A base CSS class to apply to the containing wrapper element\r
- * (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on\r
- * this name to make the overall effect work, so if you supply an alternate base class, make sure you\r
- * also supply all of the necessary rules.\r
- * @return {Ext.Element} The outermost wrapping element of the created box structure.\r
- */\r
- boxWrap : function(cls){\r
- cls = cls || 'x-box';\r
- 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)));\r
- Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);\r
- return el;\r
- },\r
-\r
- /**\r
- * Set the size of this Element. If animation is true, both width and height will be animated concurrently.\r
- * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>\r
- * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>\r
- * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.\r
- * <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>\r
- * </ul></div>\r
- * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>\r
- * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li>\r
- * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>\r
- * </ul></div>\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setSize : function(width, height, animate){\r
- var me = this;\r
- if(Ext.isObject(width)){ // in case of object from getSize()\r
- height = width.height;\r
- width = width.width;\r
- }\r
- width = me.adjustWidth(width);\r
- height = me.adjustHeight(height);\r
- if(!animate || !me.anim){\r
- me.dom.style.width = me.addUnits(width);\r
- me.dom.style.height = me.addUnits(height);\r
- }else{\r
- me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));\r
- }\r
- return me;\r
- },\r
-\r
- /**\r
- * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders\r
- * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements\r
- * if a height has not been set using CSS.\r
- * @return {Number}\r
- */\r
- getComputedHeight : function(){\r
- var me = this,\r
- h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);\r
- if(!h){\r
- h = parseFloat(me.getStyle('height')) || 0;\r
- if(!me.isBorderBox()){\r
- h += me.getFrameWidth('tb');\r
- }\r
- }\r
- return h;\r
- },\r
-\r
- /**\r
- * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders\r
- * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements\r
- * if a width has not been set using CSS.\r
- * @return {Number}\r
- */\r
- getComputedWidth : function(){\r
- var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);\r
- if(!w){\r
- w = parseFloat(this.getStyle('width')) || 0;\r
- if(!this.isBorderBox()){\r
- w += this.getFrameWidth('lr');\r
- }\r
- }\r
- return w;\r
- },\r
-\r
- /**\r
- * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()\r
- for more information about the sides.\r
- * @param {String} sides\r
- * @return {Number}\r
- */\r
- getFrameWidth : function(sides, onlyContentBox){\r
- return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));\r
- },\r
-\r
- /**\r
- * Sets up event handlers to add and remove a css class when the mouse is over this element\r
- * @param {String} className\r
- * @return {Ext.Element} this\r
- */\r
- addClassOnOver : function(className){\r
- this.hover(\r
- function(){\r
- Ext.fly(this, INTERNAL).addClass(className);\r
- },\r
- function(){\r
- Ext.fly(this, INTERNAL).removeClass(className);\r
- }\r
- );\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets up event handlers to add and remove a css class when this element has the focus\r
- * @param {String} className\r
- * @return {Ext.Element} this\r
- */\r
- addClassOnFocus : function(className){\r
- this.on("focus", function(){\r
- Ext.fly(this, INTERNAL).addClass(className);\r
- }, this.dom);\r
- this.on("blur", function(){\r
- Ext.fly(this, INTERNAL).removeClass(className);\r
- }, this.dom);\r
- return this;\r
- },\r
-\r
- /**\r
- * 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)\r
- * @param {String} className\r
- * @return {Ext.Element} this\r
- */\r
- addClassOnClick : function(className){\r
- var dom = this.dom;\r
- this.on("mousedown", function(){\r
- Ext.fly(dom, INTERNAL).addClass(className);\r
- var d = Ext.getDoc(),\r
- fn = function(){\r
- Ext.fly(dom, INTERNAL).removeClass(className);\r
- d.removeListener("mouseup", fn);\r
- };\r
- d.on("mouseup", fn);\r
- });\r
- return this;\r
- },\r
-\r
- /**\r
- * <p>Returns the dimensions of the element available to lay content out in.<p>\r
- * <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>\r
- * example:<pre><code>\r
- var vpSize = Ext.getBody().getViewSize();\r
-\r
- // all Windows created afterwards will have a default value of 90% height and 95% width\r
- Ext.Window.override({\r
- width: vpSize.width * 0.9,\r
- height: vpSize.height * 0.95\r
- });\r
- // To handle window resizing you would have to hook onto onWindowResize.\r
- * </code></pre>\r
- *\r
- * getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.\r
- * To obtain the size including scrollbars, use getStyleSize\r
- *\r
- * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.\r
- */\r
-\r
- getViewSize : function(){\r
- var doc = document,\r
- d = this.dom,\r
- isDoc = (d == doc || d == doc.body);\r
-\r
- // If the body, use Ext.lib.Dom\r
- if (isDoc) {\r
- var extdom = Ext.lib.Dom;\r
- return {\r
- width : extdom.getViewWidth(),\r
- height : extdom.getViewHeight()\r
- }\r
-\r
- // Else use clientHeight/clientWidth\r
- } else {\r
- return {\r
- width : d.clientWidth,\r
- height : d.clientHeight\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * <p>Returns the dimensions of the element available to lay content out in.<p>\r
- *\r
- * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.\r
- * To obtain the size excluding scrollbars, use getViewSize\r
- *\r
- * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.\r
- */\r
-\r
- getStyleSize : function(){\r
- var me = this,\r
- w, h,\r
- doc = document,\r
- d = this.dom,\r
- isDoc = (d == doc || d == doc.body),\r
- s = d.style;\r
-\r
- // If the body, use Ext.lib.Dom\r
- if (isDoc) {\r
- var extdom = Ext.lib.Dom;\r
- return {\r
- width : extdom.getViewWidth(),\r
- height : extdom.getViewHeight()\r
- }\r
- }\r
- // Use Styles if they are set\r
- if(s.width && s.width != 'auto'){\r
- w = parseFloat(s.width);\r
- if(me.isBorderBox()){\r
- w -= me.getFrameWidth('lr');\r
- }\r
- }\r
- // Use Styles if they are set\r
- if(s.height && s.height != 'auto'){\r
- h = parseFloat(s.height);\r
- if(me.isBorderBox()){\r
- h -= me.getFrameWidth('tb');\r
- }\r
- }\r
- // Use getWidth/getHeight if style not set.\r
- return {width: w || me.getWidth(true), height: h || me.getHeight(true)};\r
- },\r
-\r
- /**\r
- * Returns the size of the element.\r
- * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding\r
- * @return {Object} An object containing the element's size {width: (element width), height: (element height)}\r
- */\r
- getSize : function(contentSize){\r
- return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};\r
- },\r
-\r
- /**\r
- * Forces the browser to repaint this element\r
- * @return {Ext.Element} this\r
- */\r
- repaint : function(){\r
- var dom = this.dom;\r
- this.addClass("x-repaint");\r
- setTimeout(function(){\r
- Ext.fly(dom).removeClass("x-repaint");\r
- }, 1);\r
- return this;\r
- },\r
-\r
- /**\r
- * Disables text selection for this element (normalized across browsers)\r
- * @return {Ext.Element} this\r
- */\r
- unselectable : function(){\r
- this.dom.unselectable = "on";\r
- return this.swallowEvent("selectstart", true).\r
- applyStyles("-moz-user-select:none;-khtml-user-select:none;").\r
- addClass("x-unselectable");\r
- },\r
-\r
- /**\r
- * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,\r
- * then it returns the calculated width of the sides (see getPadding)\r
- * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides\r
- * @return {Object/Number}\r
- */\r
- getMargins : function(side){\r
- var me = this,\r
- key,\r
- hash = {t:"top", l:"left", r:"right", b: "bottom"},\r
- o = {};\r
-\r
- if (!side) {\r
- for (key in me.margins){\r
- o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;\r
- }\r
- return o;\r
- } else {\r
- return me.addStyles.call(me, side, me.margins);\r
- }\r
- }\r
- };\r
-}());\r
-/**\r
- * @class Ext.Element\r
- */\r
-(function(){\r
-var D = Ext.lib.Dom,\r
- LEFT = "left",\r
- RIGHT = "right",\r
- TOP = "top",\r
- BOTTOM = "bottom",\r
- POSITION = "position",\r
- STATIC = "static",\r
- RELATIVE = "relative",\r
- AUTO = "auto",\r
- ZINDEX = "z-index";\r
-\r
-Ext.Element.addMethods({\r
- /**\r
- * 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).\r
- * @return {Number} The X position of the element\r
- */\r
- getX : function(){\r
- return D.getX(this.dom);\r
- },\r
-\r
- /**\r
- * 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).\r
- * @return {Number} The Y position of the element\r
- */\r
- getY : function(){\r
- return D.getY(this.dom);\r
- },\r
-\r
- /**\r
- * 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).\r
- * @return {Array} The XY position of the element\r
- */\r
- getXY : function(){\r
- return D.getXY(this.dom);\r
- },\r
-\r
- /**\r
- * 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.\r
- * @param {Mixed} element The element to get the offsets from.\r
- * @return {Array} The XY page offsets (e.g. [100, -200])\r
- */\r
- getOffsetsTo : function(el){\r
- var o = this.getXY(),\r
- e = Ext.fly(el, '_internal').getXY();\r
- return [o[0]-e[0],o[1]-e[1]];\r
- },\r
-\r
- /**\r
- * 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).\r
- * @param {Number} The X position of the element\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setX : function(x, animate){ \r
- return this.setXY([x, this.getY()], this.animTest(arguments, animate, 1));\r
- },\r
-\r
- /**\r
- * 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).\r
- * @param {Number} The Y position of the element\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setY : function(y, animate){ \r
- return this.setXY([this.getX(), y], this.animTest(arguments, animate, 1));\r
- },\r
-\r
- /**\r
- * Sets the element's left position directly using CSS style (instead of {@link #setX}).\r
- * @param {String} left The left CSS property value\r
- * @return {Ext.Element} this\r
- */\r
- setLeft : function(left){\r
- this.setStyle(LEFT, this.addUnits(left));\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets the element's top position directly using CSS style (instead of {@link #setY}).\r
- * @param {String} top The top CSS property value\r
- * @return {Ext.Element} this\r
- */\r
- setTop : function(top){\r
- this.setStyle(TOP, this.addUnits(top));\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets the element's CSS right style.\r
- * @param {String} right The right CSS property value\r
- * @return {Ext.Element} this\r
- */\r
- setRight : function(right){\r
- this.setStyle(RIGHT, this.addUnits(right));\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets the element's CSS bottom style.\r
- * @param {String} bottom The bottom CSS property value\r
- * @return {Ext.Element} this\r
- */\r
- setBottom : function(bottom){\r
- this.setStyle(BOTTOM, this.addUnits(bottom));\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets the position of the element in page coordinates, regardless of how the element is positioned.\r
- * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).\r
- * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setXY : function(pos, animate){\r
- var me = this;\r
- if(!animate || !me.anim){\r
- D.setXY(me.dom, pos);\r
- }else{\r
- me.anim({points: {to: pos}}, me.preanim(arguments, 1), 'motion');\r
- }\r
- return me;\r
- },\r
-\r
- /**\r
- * Sets the position of the element in page coordinates, regardless of how the element is positioned.\r
- * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).\r
- * @param {Number} x X value for new position (coordinates are page-based)\r
- * @param {Number} y Y value for new position (coordinates are page-based)\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setLocation : function(x, y, animate){\r
- return this.setXY([x, y], this.animTest(arguments, animate, 2));\r
- },\r
-\r
- /**\r
- * Sets the position of the element in page coordinates, regardless of how the element is positioned.\r
- * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).\r
- * @param {Number} x X value for new position (coordinates are page-based)\r
- * @param {Number} y Y value for new position (coordinates are page-based)\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- moveTo : function(x, y, animate){\r
- return this.setXY([x, y], this.animTest(arguments, animate, 2)); \r
- }, \r
- \r
- /**\r
- * Gets the left X coordinate\r
- * @param {Boolean} local True to get the local css position instead of page coordinate\r
- * @return {Number}\r
- */\r
- getLeft : function(local){\r
- return !local ? this.getX() : parseInt(this.getStyle(LEFT), 10) || 0;\r
- },\r
-\r
- /**\r
- * Gets the right X coordinate of the element (element X position + element width)\r
- * @param {Boolean} local True to get the local css position instead of page coordinate\r
- * @return {Number}\r
- */\r
- getRight : function(local){\r
- var me = this;\r
- return !local ? me.getX() + me.getWidth() : (me.getLeft(true) + me.getWidth()) || 0;\r
- },\r
-\r
- /**\r
- * Gets the top Y coordinate\r
- * @param {Boolean} local True to get the local css position instead of page coordinate\r
- * @return {Number}\r
- */\r
- getTop : function(local) {\r
- return !local ? this.getY() : parseInt(this.getStyle(TOP), 10) || 0;\r
- },\r
-\r
- /**\r
- * Gets the bottom Y coordinate of the element (element Y position + element height)\r
- * @param {Boolean} local True to get the local css position instead of page coordinate\r
- * @return {Number}\r
- */\r
- getBottom : function(local){\r
- var me = this;\r
- return !local ? me.getY() + me.getHeight() : (me.getTop(true) + me.getHeight()) || 0;\r
- },\r
-\r
- /**\r
- * Initializes positioning on this element. If a desired position is not passed, it will make the\r
- * the element positioned relative IF it is not already positioned.\r
- * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"\r
- * @param {Number} zIndex (optional) The zIndex to apply\r
- * @param {Number} x (optional) Set the page X position\r
- * @param {Number} y (optional) Set the page Y position\r
- */\r
- position : function(pos, zIndex, x, y){\r
- var me = this;\r
- \r
- if(!pos && me.isStyle(POSITION, STATIC)){ \r
- me.setStyle(POSITION, RELATIVE); \r
- } else if(pos) {\r
- me.setStyle(POSITION, pos);\r
- }\r
- if(zIndex){\r
- me.setStyle(ZINDEX, zIndex);\r
- }\r
- if(x || y) me.setXY([x || false, y || false]);\r
- },\r
-\r
- /**\r
- * Clear positioning back to the default when the document was loaded\r
- * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.\r
- * @return {Ext.Element} this\r
- */\r
- clearPositioning : function(value){\r
- value = value || '';\r
- this.setStyle({\r
- left : value,\r
- right : value,\r
- top : value,\r
- bottom : value,\r
- "z-index" : "",\r
- position : STATIC\r
- });\r
- return this;\r
- },\r
-\r
- /**\r
- * Gets an object with all CSS positioning properties. Useful along with setPostioning to get\r
- * snapshot before performing an update and then restoring the element.\r
- * @return {Object}\r
- */\r
- getPositioning : function(){\r
- var l = this.getStyle(LEFT);\r
- var t = this.getStyle(TOP);\r
- return {\r
- "position" : this.getStyle(POSITION),\r
- "left" : l,\r
- "right" : l ? "" : this.getStyle(RIGHT),\r
- "top" : t,\r
- "bottom" : t ? "" : this.getStyle(BOTTOM),\r
- "z-index" : this.getStyle(ZINDEX)\r
- };\r
- },\r
- \r
- /**\r
- * Set positioning with an object returned by getPositioning().\r
- * @param {Object} posCfg\r
- * @return {Ext.Element} this\r
- */\r
- setPositioning : function(pc){\r
- var me = this,\r
- style = me.dom.style;\r
- \r
- me.setStyle(pc);\r
- \r
- if(pc.right == AUTO){\r
- style.right = "";\r
- }\r
- if(pc.bottom == AUTO){\r
- style.bottom = "";\r
- }\r
- \r
- return me;\r
- }, \r
- \r
- /**\r
- * Translates the passed page coordinates into left/top css values for this element\r
- * @param {Number/Array} x The page x or an array containing [x, y]\r
- * @param {Number} y (optional) The page y, required if x is not an array\r
- * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}\r
- */\r
- translatePoints : function(x, y){ \r
- y = isNaN(x[1]) ? y : x[1];\r
- x = isNaN(x[0]) ? x : x[0];\r
- var me = this,\r
- relative = me.isStyle(POSITION, RELATIVE),\r
- o = me.getXY(),\r
- l = parseInt(me.getStyle(LEFT), 10),\r
- t = parseInt(me.getStyle(TOP), 10);\r
- \r
- l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft);\r
- t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop); \r
-\r
- return {left: (x - o[0] + l), top: (y - o[1] + t)}; \r
- },\r
- \r
- animTest : function(args, animate, i) {\r
- return !!animate && this.preanim ? this.preanim(args, i) : false;\r
- }\r
-});\r
-})();/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods({\r
- /**\r
- * 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.\r
- * @param {Object} box The box to fill {x, y, width, height}\r
- * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setBox : function(box, adjust, animate){\r
- var me = this,\r
- w = box.width, \r
- h = box.height;\r
- if((adjust && !me.autoBoxAdjust) && !me.isBorderBox()){\r
- w -= (me.getBorderWidth("lr") + me.getPadding("lr"));\r
- h -= (me.getBorderWidth("tb") + me.getPadding("tb"));\r
- }\r
- me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2));\r
- return me;\r
- },\r
-\r
- /**\r
- * Return an object defining the area of this Element which can be passed to {@link #setBox} to\r
- * set another Element's size/location to match this element.\r
- * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.\r
- * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.\r
- * @return {Object} box An object in the format<pre><code>\r
-{\r
- x: <Element's X position>,\r
- y: <Element's Y position>,\r
- width: <Element's width>,\r
- height: <Element's height>,\r
- bottom: <Element's lower bound>,\r
- right: <Element's rightmost bound>\r
-}\r
-</code></pre>\r
- * The returned object may also be addressed as an Array where index 0 contains the X position\r
- * and index 1 contains the Y position. So the result may also be used for {@link #setXY}\r
- */\r
- getBox : function(contentBox, local) { \r
- var me = this,\r
- xy,\r
- left,\r
- top,\r
- getBorderWidth = me.getBorderWidth,\r
- getPadding = me.getPadding, \r
- l,\r
- r,\r
- t,\r
- b;\r
- if(!local){\r
- xy = me.getXY();\r
- }else{\r
- left = parseInt(me.getStyle("left"), 10) || 0;\r
- top = parseInt(me.getStyle("top"), 10) || 0;\r
- xy = [left, top];\r
- }\r
- var el = me.dom, w = el.offsetWidth, h = el.offsetHeight, bx;\r
- if(!contentBox){\r
- bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};\r
- }else{\r
- l = getBorderWidth.call(me, "l") + getPadding.call(me, "l");\r
- r = getBorderWidth.call(me, "r") + getPadding.call(me, "r");\r
- t = getBorderWidth.call(me, "t") + getPadding.call(me, "t");\r
- b = getBorderWidth.call(me, "b") + getPadding.call(me, "b");\r
- 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)};\r
- }\r
- bx.right = bx.x + bx.width;\r
- bx.bottom = bx.y + bx.height;\r
- return bx;\r
- },\r
- \r
- /**\r
- * Move this element relative to its current position.\r
- * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").\r
- * @param {Number} distance How far to move the element in pixels\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- move : function(direction, distance, animate){\r
- var me = this, \r
- xy = me.getXY(),\r
- x = xy[0],\r
- y = xy[1], \r
- left = [x - distance, y],\r
- right = [x + distance, y],\r
- top = [x, y - distance],\r
- bottom = [x, y + distance],\r
- hash = {\r
- l : left,\r
- left : left,\r
- r : right,\r
- right : right,\r
- t : top,\r
- top : top,\r
- up : top,\r
- b : bottom, \r
- bottom : bottom,\r
- down : bottom \r
- };\r
- \r
- direction = direction.toLowerCase(); \r
- me.moveTo(hash[direction][0], hash[direction][1], me.animTest.call(me, arguments, animate, 2));\r
- },\r
- \r
- /**\r
- * Quick set left and top adding default units\r
- * @param {String} left The left CSS property value\r
- * @param {String} top The top CSS property value\r
- * @return {Ext.Element} this\r
- */\r
- setLeftTop : function(left, top){\r
- var me = this,\r
- style = me.dom.style;\r
- style.left = me.addUnits(left);\r
- style.top = me.addUnits(top);\r
- return me;\r
- },\r
- \r
- /**\r
- * Returns the region of the given element.\r
- * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).\r
- * @return {Region} A Ext.lib.Region containing "top, left, bottom, right" member data.\r
- */\r
- getRegion : function(){\r
- return Ext.lib.Dom.getRegion(this.dom);\r
- },\r
- \r
- /**\r
- * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.\r
- * @param {Number} x X value for new position (coordinates are page-based)\r
- * @param {Number} y Y value for new position (coordinates are page-based)\r
- * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>\r
- * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels)</li>\r
- * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.\r
- * </ul></div>\r
- * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>\r
- * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels)</li>\r
- * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>\r
- * </ul></div>\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setBounds : function(x, y, width, height, animate){\r
- var me = this;\r
- if (!animate || !me.anim) {\r
- me.setSize(width, height);\r
- me.setLocation(x, y);\r
- } else {\r
- me.anim({points: {to: [x, y]}, \r
- width: {to: me.adjustWidth(width)}, \r
- height: {to: me.adjustHeight(height)}},\r
- me.preanim(arguments, 4), \r
- 'motion');\r
- }\r
- return me;\r
- },\r
-\r
- /**\r
- * Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.\r
- * @param {Ext.lib.Region} region The region to fill\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setRegion : function(region, animate) {\r
- return this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.animTest.call(this, arguments, animate, 1));\r
- }\r
-});/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods({\r
- /**\r
- * Returns true if this element is scrollable.\r
- * @return {Boolean}\r
- */\r
- isScrollable : function(){\r
- var dom = this.dom;\r
- return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;\r
- },\r
-\r
- /**\r
- * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().\r
- * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.\r
- * @param {Number} value The new scroll value.\r
- * @return {Element} this\r
- */\r
- scrollTo : function(side, value){\r
- this.dom["scroll" + (/top/i.test(side) ? "Top" : "Left")] = value;\r
- return this;\r
- },\r
-\r
- /**\r
- * Returns the current scroll position of the element.\r
- * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}\r
- */\r
- getScroll : function(){\r
- var d = this.dom, \r
- doc = document,\r
- body = doc.body,\r
- docElement = doc.documentElement,\r
- l,\r
- t,\r
- ret;\r
-\r
- if(d == doc || d == body){\r
- if(Ext.isIE && Ext.isStrict){\r
- l = docElement.scrollLeft; \r
- t = docElement.scrollTop;\r
- }else{\r
- l = window.pageXOffset;\r
- t = window.pageYOffset;\r
- }\r
- ret = {left: l || (body ? body.scrollLeft : 0), top: t || (body ? body.scrollTop : 0)};\r
- }else{\r
- ret = {left: d.scrollLeft, top: d.scrollTop};\r
- }\r
- return ret;\r
- }\r
-});/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods({\r
- /**\r
- * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().\r
- * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.\r
- * @param {Number} value The new scroll value\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Element} this\r
- */\r
- scrollTo : function(side, value, animate){\r
- var top = /top/i.test(side), //check if we're scrolling top or left\r
- me = this,\r
- dom = me.dom,\r
- prop;\r
- if (!animate || !me.anim) {\r
- prop = 'scroll' + (top ? 'Top' : 'Left'), // just setting the value, so grab the direction\r
- dom[prop] = value;\r
- }else{\r
- prop = 'scroll' + (top ? 'Left' : 'Top'), // if scrolling top, we need to grab scrollLeft, if left, scrollTop\r
- me.anim({scroll: {to: top ? [dom[prop], value] : [value, dom[prop]]}},\r
- me.preanim(arguments, 2), 'scroll');\r
- }\r
- return me;\r
- },\r
- \r
- /**\r
- * Scrolls this element into view within the passed container.\r
- * @param {Mixed} container (optional) The container element to scroll (defaults to document.body). Should be a\r
- * string (id), dom node, or Ext.Element.\r
- * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)\r
- * @return {Ext.Element} this\r
- */\r
- scrollIntoView : function(container, hscroll){\r
- var c = Ext.getDom(container) || Ext.getBody().dom,\r
- el = this.dom,\r
- o = this.getOffsetsTo(c),\r
- l = o[0] + c.scrollLeft,\r
- t = o[1] + c.scrollTop,\r
- b = t + el.offsetHeight,\r
- r = l + el.offsetWidth,\r
- ch = c.clientHeight,\r
- ct = parseInt(c.scrollTop, 10),\r
- cl = parseInt(c.scrollLeft, 10),\r
- cb = ct + ch,\r
- cr = cl + c.clientWidth;\r
-\r
- if (el.offsetHeight > ch || t < ct) {\r
- c.scrollTop = t;\r
- } else if (b > cb){\r
- c.scrollTop = b-ch;\r
- }\r
- c.scrollTop = c.scrollTop; // corrects IE, other browsers will ignore\r
-\r
- if(hscroll !== false){\r
- if(el.offsetWidth > c.clientWidth || l < cl){\r
- c.scrollLeft = l;\r
- }else if(r > cr){\r
- c.scrollLeft = r - c.clientWidth;\r
- }\r
- c.scrollLeft = c.scrollLeft;\r
- }\r
- return this;\r
- },\r
-\r
- // private\r
- scrollChildIntoView : function(child, hscroll){\r
- Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);\r
- },\r
- \r
- /**\r
- * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is\r
- * within this element's scrollable range.\r
- * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").\r
- * @param {Number} distance How far to scroll the element in pixels\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Boolean} Returns true if a scroll was triggered or false if the element\r
- * was scrolled as far as it could go.\r
- */\r
- scroll : function(direction, distance, animate){\r
- if(!this.isScrollable()){\r
- return;\r
- }\r
- var el = this.dom,\r
- l = el.scrollLeft, t = el.scrollTop,\r
- w = el.scrollWidth, h = el.scrollHeight,\r
- cw = el.clientWidth, ch = el.clientHeight,\r
- scrolled = false, v,\r
- hash = {\r
- l: Math.min(l + distance, w-cw),\r
- r: v = Math.max(l - distance, 0),\r
- t: Math.max(t - distance, 0),\r
- b: Math.min(t + distance, h-ch)\r
- };\r
- hash.d = hash.b;\r
- hash.u = hash.t;\r
- \r
- direction = direction.substr(0, 1);\r
- if((v = hash[direction]) > -1){\r
- scrolled = true;\r
- this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.preanim(arguments, 2));\r
- }\r
- return scrolled;\r
- }\r
-});/**\r
- * @class Ext.Element\r
- */\r
-/**\r
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.Element.VISIBILITY = 1;\r
-/**\r
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.Element.DISPLAY = 2;\r
-\r
-Ext.Element.addMethods(function(){\r
- var VISIBILITY = "visibility",\r
- DISPLAY = "display",\r
- HIDDEN = "hidden",\r
- NONE = "none", \r
- ORIGINALDISPLAY = 'originalDisplay',\r
- VISMODE = 'visibilityMode',\r
- ELDISPLAY = Ext.Element.DISPLAY,\r
- data = Ext.Element.data,\r
- getDisplay = function(dom){\r
- var d = data(dom, ORIGINALDISPLAY);\r
- if(d === undefined){\r
- data(dom, ORIGINALDISPLAY, d = '');\r
- }\r
- return d;\r
- },\r
- getVisMode = function(dom){\r
- var m = data(dom, VISMODE);\r
- if(m === undefined){\r
- data(dom, VISMODE, m = 1)\r
- }\r
- return m;\r
- };\r
- \r
- return {\r
- /**\r
- * The element's default display mode (defaults to "")\r
- * @type String\r
- */\r
- originalDisplay : "",\r
- visibilityMode : 1,\r
- \r
- /**\r
- * Sets the element's visibility mode. When setVisible() is called it\r
- * will use this to determine whether to set the visibility or the display property.\r
- * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY\r
- * @return {Ext.Element} this\r
- */\r
- setVisibilityMode : function(visMode){ \r
- data(this.dom, VISMODE, visMode);\r
- return this;\r
- },\r
- \r
- /**\r
- * Perform custom animation on this element.\r
- * <div><ul class="mdetail-params">\r
- * <li><u>Animation Properties</u></li>\r
- * \r
- * <p>The Animation Control Object enables gradual transitions for any member of an\r
- * element's style object that takes a numeric value including but not limited to\r
- * these properties:</p><div><ul class="mdetail-params">\r
- * <li><tt>bottom, top, left, right</tt></li>\r
- * <li><tt>height, width</tt></li>\r
- * <li><tt>margin, padding</tt></li>\r
- * <li><tt>borderWidth</tt></li>\r
- * <li><tt>opacity</tt></li>\r
- * <li><tt>fontSize</tt></li>\r
- * <li><tt>lineHeight</tt></li>\r
- * </ul></div>\r
- * \r
- * \r
- * <li><u>Animation Property Attributes</u></li>\r
- * \r
- * <p>Each Animation Property is a config object with optional properties:</p>\r
- * <div><ul class="mdetail-params">\r
- * <li><tt>by</tt>* : relative change - start at current value, change by this value</li>\r
- * <li><tt>from</tt> : ignore current value, start from this value</li>\r
- * <li><tt>to</tt>* : start at current value, go to this value</li>\r
- * <li><tt>unit</tt> : any allowable unit specification</li>\r
- * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>\r
- * </ul></div>\r
- * \r
- * <li><u>Animation Types</u></li>\r
- * \r
- * <p>The supported animation types:</p><div><ul class="mdetail-params">\r
- * <li><tt>'run'</tt> : Default\r
- * <pre><code>\r
-var el = Ext.get('complexEl');\r
-el.animate(\r
- // animation control object\r
- {\r
- borderWidth: {to: 3, from: 0},\r
- opacity: {to: .3, from: 1},\r
- height: {to: 50, from: el.getHeight()},\r
- width: {to: 300, from: el.getWidth()},\r
- top : {by: - 100, unit: 'px'},\r
- },\r
- 0.35, // animation duration\r
- null, // callback\r
- 'easeOut', // easing method\r
- 'run' // animation type ('run','color','motion','scroll') \r
-);\r
- * </code></pre>\r
- * </li>\r
- * <li><tt>'color'</tt>\r
- * <p>Animates transition of background, text, or border colors.</p>\r
- * <pre><code>\r
-el.animate(\r
- // animation control object\r
- {\r
- color: { to: '#06e' },\r
- backgroundColor: { to: '#e06' }\r
- },\r
- 0.35, // animation duration\r
- null, // callback\r
- 'easeOut', // easing method\r
- 'color' // animation type ('run','color','motion','scroll') \r
-);\r
- * </code></pre> \r
- * </li>\r
- * \r
- * <li><tt>'motion'</tt>\r
- * <p>Animates the motion of an element to/from specific points using optional bezier\r
- * way points during transit.</p>\r
- * <pre><code>\r
-el.animate(\r
- // animation control object\r
- {\r
- borderWidth: {to: 3, from: 0},\r
- opacity: {to: .3, from: 1},\r
- height: {to: 50, from: el.getHeight()},\r
- width: {to: 300, from: el.getWidth()},\r
- top : {by: - 100, unit: 'px'},\r
- points: {\r
- to: [50, 100], // go to this point\r
- control: [ // optional bezier way points\r
- [ 600, 800],\r
- [-100, 200]\r
- ]\r
- }\r
- },\r
- 3000, // animation duration (milliseconds!)\r
- null, // callback\r
- 'easeOut', // easing method\r
- 'motion' // animation type ('run','color','motion','scroll') \r
-);\r
- * </code></pre> \r
- * </li>\r
- * <li><tt>'scroll'</tt>\r
- * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>\r
- * <pre><code>\r
-el.animate(\r
- // animation control object\r
- {\r
- scroll: {to: [400, 300]}\r
- },\r
- 0.35, // animation duration\r
- null, // callback\r
- 'easeOut', // easing method\r
- 'scroll' // animation type ('run','color','motion','scroll') \r
-);\r
- * </code></pre> \r
- * </li>\r
- * </ul></div>\r
- * \r
- * </ul></div>\r
- * \r
- * @param {Object} args The animation control args\r
- * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)\r
- * @param {Function} onComplete (optional) Function to call when animation completes\r
- * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)\r
- * @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,\r
- * <tt>'motion'</tt>, or <tt>'scroll'</tt>\r
- * @return {Ext.Element} this\r
- */\r
- animate : function(args, duration, onComplete, easing, animType){ \r
- this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);\r
- return this;\r
- },\r
- \r
- /*\r
- * @private Internal animation call\r
- */\r
- anim : function(args, opt, animType, defaultDur, defaultEase, cb){\r
- animType = animType || 'run';\r
- opt = opt || {};\r
- var me = this, \r
- anim = Ext.lib.Anim[animType](\r
- me.dom, \r
- args,\r
- (opt.duration || defaultDur) || .35,\r
- (opt.easing || defaultEase) || 'easeOut',\r
- function(){\r
- if(cb) cb.call(me);\r
- if(opt.callback) opt.callback.call(opt.scope || me, me, opt);\r
- },\r
- me\r
- );\r
- opt.anim = anim;\r
- return anim;\r
- },\r
- \r
- // private legacy anim prep\r
- preanim : function(a, i){\r
- return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});\r
- },\r
- \r
- /**\r
- * Checks whether the element is currently visible using both visibility and display properties. \r
- * @return {Boolean} True if the element is currently visible, else false\r
- */\r
- isVisible : function() {\r
- return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);\r
- },\r
- \r
- /**\r
- * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use\r
- * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.\r
- * @param {Boolean} visible Whether the element is visible\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- setVisible : function(visible, animate){\r
- var me = this,\r
- dom = me.dom,\r
- isDisplay = getVisMode(this.dom) == ELDISPLAY;\r
- \r
- if (!animate || !me.anim) {\r
- if(isDisplay){\r
- me.setDisplayed(visible);\r
- }else{\r
- me.fixDisplay();\r
- dom.style.visibility = visible ? "visible" : HIDDEN;\r
- }\r
- }else{\r
- // closure for composites \r
- if(visible){\r
- me.setOpacity(.01);\r
- me.setVisible(true);\r
- }\r
- me.anim({opacity: { to: (visible?1:0) }},\r
- me.preanim(arguments, 1),\r
- null,\r
- .35,\r
- 'easeIn',\r
- function(){\r
- if(!visible){\r
- dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN; \r
- Ext.fly(dom).setOpacity(1);\r
- }\r
- });\r
- }\r
- return me;\r
- },\r
- \r
- /**\r
- * Toggles the element's visibility or display, depending on visibility mode.\r
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- toggle : function(animate){\r
- var me = this;\r
- me.setVisible(!me.isVisible(), me.preanim(arguments, 0));\r
- return me;\r
- },\r
- \r
- /**\r
- * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.\r
- * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.\r
- * @return {Ext.Element} this\r
- */\r
- setDisplayed : function(value) { \r
- if(typeof value == "boolean"){\r
- value = value ? getDisplay(this.dom) : NONE;\r
- }\r
- this.setStyle(DISPLAY, value);\r
- return this;\r
- },\r
- \r
- // private\r
- fixDisplay : function(){\r
- var me = this;\r
- if(me.isStyle(DISPLAY, NONE)){\r
- me.setStyle(VISIBILITY, HIDDEN);\r
- me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default\r
- if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block\r
- me.setStyle(DISPLAY, "block");\r
- }\r
- }\r
- },\r
- \r
- /**\r
- * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- hide : function(animate){\r
- this.setVisible(false, this.preanim(arguments, 0));\r
- return this;\r
- },\r
- \r
- /**\r
- * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.\r
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
- * @return {Ext.Element} this\r
- */\r
- show : function(animate){\r
- this.setVisible(true, this.preanim(arguments, 0));\r
- return this;\r
- }\r
- }\r
-}());/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods(\r
-function(){\r
- var VISIBILITY = "visibility",\r
- DISPLAY = "display",\r
- HIDDEN = "hidden",\r
- NONE = "none",\r
- XMASKED = "x-masked",\r
- XMASKEDRELATIVE = "x-masked-relative",\r
- data = Ext.Element.data;\r
-\r
- return {\r
- /**\r
- * Checks whether the element is currently visible using both visibility and display properties.\r
- * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)\r
- * @return {Boolean} True if the element is currently visible, else false\r
- */\r
- isVisible : function(deep) {\r
- var vis = !this.isStyle(VISIBILITY,HIDDEN) && !this.isStyle(DISPLAY,NONE),\r
- p = this.dom.parentNode;\r
- if(deep !== true || !vis){\r
- return vis;\r
- }\r
- while(p && !/^body/i.test(p.tagName)){\r
- if(!Ext.fly(p, '_isVisible').isVisible()){\r
- return false;\r
- }\r
- p = p.parentNode;\r
- }\r
- return true;\r
- },\r
-\r
- /**\r
- * Returns true if display is not "none"\r
- * @return {Boolean}\r
- */\r
- isDisplayed : function() {\r
- return !this.isStyle(DISPLAY, NONE);\r
- },\r
-\r
- /**\r
- * Convenience method for setVisibilityMode(Element.DISPLAY)\r
- * @param {String} display (optional) What to set display to when visible\r
- * @return {Ext.Element} this\r
- */\r
- enableDisplayMode : function(display){\r
- this.setVisibilityMode(Ext.Element.DISPLAY);\r
- if(!Ext.isEmpty(display)){\r
- data(this.dom, 'originalDisplay', display);\r
- }\r
- return this;\r
- },\r
-\r
- /**\r
- * Puts a mask over this element to disable user interaction. Requires core.css.\r
- * This method can only be applied to elements which accept child nodes.\r
- * @param {String} msg (optional) A message to display in the mask\r
- * @param {String} msgCls (optional) A css class to apply to the msg element\r
- * @return {Element} The mask element\r
- */\r
- mask : function(msg, msgCls){\r
- var me = this,\r
- dom = me.dom,\r
- dh = Ext.DomHelper,\r
- EXTELMASKMSG = "ext-el-mask-msg",\r
- el,\r
- mask;\r
-\r
- if(me.getStyle("position") == "static"){\r
- me.addClass(XMASKEDRELATIVE);\r
- }\r
- if((el = data(dom, 'maskMsg'))){\r
- el.remove();\r
- }\r
- if((el = data(dom, 'mask'))){\r
- el.remove();\r
- }\r
-\r
- mask = dh.append(dom, {cls : "ext-el-mask"}, true);\r
- data(dom, 'mask', mask);\r
-\r
- me.addClass(XMASKED);\r
- mask.setDisplayed(true);\r
- if(typeof msg == 'string'){\r
- var mm = dh.append(dom, {cls : EXTELMASKMSG, cn:{tag:'div'}}, true);\r
- data(dom, 'maskMsg', mm);\r
- mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;\r
- mm.dom.firstChild.innerHTML = msg;\r
- mm.setDisplayed(true);\r
- mm.center(me);\r
- }\r
- if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto'){ // ie will not expand full height automatically\r
- mask.setSize(undefined, me.getHeight());\r
- }\r
- return mask;\r
- },\r
-\r
- /**\r
- * Removes a previously applied mask.\r
- */\r
- unmask : function(){\r
- var me = this,\r
- dom = me.dom,\r
- mask = data(dom, 'mask'),\r
- maskMsg = data(dom, 'maskMsg');\r
- if(mask){\r
- if(maskMsg){\r
- maskMsg.remove();\r
- data(dom, 'maskMsg', undefined);\r
- }\r
- mask.remove();\r
- data(dom, 'mask', undefined);\r
- }\r
- me.removeClass([XMASKED, XMASKEDRELATIVE]);\r
- },\r
-\r
- /**\r
- * Returns true if this element is masked\r
- * @return {Boolean}\r
- */\r
- isMasked : function(){\r
- var m = data(this.dom, 'mask');\r
- return m && m.isVisible();\r
- },\r
-\r
- /**\r
- * Creates an iframe shim for this element to keep selects and other windowed objects from\r
- * showing through.\r
- * @return {Ext.Element} The new shim element\r
- */\r
- createShim : function(){\r
- var el = document.createElement('iframe'),\r
- shim;\r
- el.frameBorder = '0';\r
- el.className = 'ext-shim';\r
- el.src = Ext.SSL_SECURE_URL;\r
- shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));\r
- shim.autoBoxAdjust = false;\r
- return shim;\r
- }\r
- };\r
-}());/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods({\r
- /**\r
- * Convenience method for constructing a KeyMap\r
- * @param {Number/Array/Object/String} key Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:\r
- * <code>{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}</code>\r
- * @param {Function} fn The function to call\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the specified function is executed. Defaults to this Element.\r
- * @return {Ext.KeyMap} The KeyMap created\r
- */\r
- addKeyListener : function(key, fn, scope){\r
- var config;\r
- if(!Ext.isObject(key) || Ext.isArray(key)){\r
- config = {\r
- key: key,\r
- fn: fn,\r
- scope: scope\r
- };\r
- }else{\r
- config = {\r
- key : key.key,\r
- shift : key.shift,\r
- ctrl : key.ctrl,\r
- alt : key.alt,\r
- fn: fn,\r
- scope: scope\r
- };\r
- }\r
- return new Ext.KeyMap(this, config);\r
- },\r
-\r
- /**\r
- * Creates a KeyMap for this element\r
- * @param {Object} config The KeyMap config. See {@link Ext.KeyMap} for more details\r
- * @return {Ext.KeyMap} The KeyMap created\r
- */\r
- addKeyMap : function(config){\r
- return new Ext.KeyMap(this, config);\r
- }\r
-});(function(){\r
- // contants\r
- var NULL = null,\r
- UNDEFINED = undefined,\r
- TRUE = true,\r
- FALSE = false,\r
- SETX = "setX",\r
- SETY = "setY",\r
- SETXY = "setXY",\r
- LEFT = "left",\r
- BOTTOM = "bottom",\r
- TOP = "top",\r
- RIGHT = "right",\r
- HEIGHT = "height",\r
- WIDTH = "width",\r
- POINTS = "points",\r
- HIDDEN = "hidden",\r
- ABSOLUTE = "absolute",\r
- VISIBLE = "visible",\r
- MOTION = "motion",\r
- POSITION = "position",\r
- EASEOUT = "easeOut",\r
- /*\r
- * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element\r
- */\r
- flyEl = new Ext.Element.Flyweight(),\r
- queues = {},\r
- getObject = function(o){\r
- return o || {};\r
- },\r
- fly = function(dom){\r
- flyEl.dom = dom;\r
- flyEl.id = Ext.id(dom);\r
- return flyEl;\r
- },\r
- /*\r
- * Queueing now stored outside of the element due to closure issues\r
- */\r
- getQueue = function(id){\r
- if(!queues[id]){\r
- queues[id] = [];\r
- }\r
- return queues[id];\r
- },\r
- setQueue = function(id, value){\r
- queues[id] = value;\r
- };\r
- \r
-//Notifies Element that fx methods are available\r
-Ext.enableFx = TRUE;\r
-\r
-/**\r
- * @class Ext.Fx\r
- * <p>A class to provide basic animation and visual effects support. <b>Note:</b> This class is automatically applied\r
- * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}.\r
- * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be\r
- * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/>\r
- * \r
- * <p><b><u>Method Chaining</u></b></p>\r
- * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that\r
- * they return the Element object itself as the method return value, it is not always possible to mix the two in a single\r
- * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.\r
- * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason,\r
- * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the\r
- * expected results and should be done with care. Also see <tt>{@link #callback}</tt>.</p><br/>\r
- *\r
- * <p><b><u>Anchor Options for Motion Effects</u></b></p>\r
- * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element\r
- * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:</p>\r
-<pre>\r
-Value Description\r
------ -----------------------------\r
-tl The top left corner\r
-t The center of the top edge\r
-tr The top right corner\r
-l The center of the left edge\r
-r The center of the right edge\r
-bl The bottom left corner\r
-b The center of the bottom edge\r
-br The bottom right corner\r
-</pre>\r
- * <b>Note</b>: some Fx methods accept specific custom config parameters. The options shown in the Config Options\r
- * section below are common options that can be passed to any Fx method unless otherwise noted.</b>\r
- * \r
- * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the\r
- * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together\r
- * and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>\r
- * el.slideIn().highlight();\r
- * </code></pre>\r
- * The callback is intended for any additional code that should run once a particular effect has completed. The Element\r
- * being operated upon is passed as the first parameter.\r
- * \r
- * @cfg {Object} scope The scope (<code>this</code> reference) in which the <tt>{@link #callback}</tt> function is executed. Defaults to the browser window.\r
- * \r
- * @cfg {String} easing A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul>\r
- * <li><b><tt>backBoth</tt></b></li>\r
- * <li><b><tt>backIn</tt></b></li>\r
- * <li><b><tt>backOut</tt></b></li>\r
- * <li><b><tt>bounceBoth</tt></b></li>\r
- * <li><b><tt>bounceIn</tt></b></li>\r
- * <li><b><tt>bounceOut</tt></b></li>\r
- * <li><b><tt>easeBoth</tt></b></li>\r
- * <li><b><tt>easeBothStrong</tt></b></li>\r
- * <li><b><tt>easeIn</tt></b></li>\r
- * <li><b><tt>easeInStrong</tt></b></li>\r
- * <li><b><tt>easeNone</tt></b></li>\r
- * <li><b><tt>easeOut</tt></b></li>\r
- * <li><b><tt>easeOutStrong</tt></b></li>\r
- * <li><b><tt>elasticBoth</tt></b></li>\r
- * <li><b><tt>elasticIn</tt></b></li>\r
- * <li><b><tt>elasticOut</tt></b></li>\r
- * </ul></div>\r
- *\r
- * @cfg {String} afterCls A css class to apply after the effect\r
- * @cfg {Number} duration The length of time (in seconds) that the effect should last\r
- * \r
- * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between\r
- * <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.\r
- * \r
- * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes\r
- * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to \r
- * effects that end with the element being visually hidden, ignored otherwise)\r
- * @cfg {String/Object/Function} afterStyle A style specification string, e.g. <tt>"width:100px"</tt>, or an object\r
- * in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the\r
- * Element after the effect finishes.\r
- * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs\r
- * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence\r
- * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)\r
- */\r
-Ext.Fx = {\r
- \r
- // private - calls the function taking arguments from the argHash based on the key. Returns the return value of the function.\r
- // this is useful for replacing switch statements (for example).\r
- switchStatements : function(key, fn, argHash){\r
- return fn.apply(this, argHash[key]);\r
- },\r
- \r
- /**\r
- * Slides the element into view. An anchor point can be optionally passed to set the point of\r
- * origin for the slide effect. This function automatically handles wrapping the element with\r
- * a fixed-size container if needed. See the Fx class overview for valid anchor point options.\r
- * Usage:\r
- *<pre><code>\r
-// default: slide the element in from the top\r
-el.slideIn();\r
-\r
-// custom: slide the element in from the right with a 2-second duration\r
-el.slideIn('r', { duration: 2 });\r
-\r
-// common config options shown with default values\r
-el.slideIn('t', {\r
- easing: 'easeOut',\r
- duration: .5\r
-});\r
-</code></pre>\r
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- slideIn : function(anchor, o){ \r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- st = dom.style,\r
- xy,\r
- r,\r
- b, \r
- wrap, \r
- after,\r
- st,\r
- args, \r
- pt,\r
- bw,\r
- bh;\r
- \r
- anchor = anchor || "t";\r
-\r
- me.queueFx(o, function(){ \r
- xy = fly(dom).getXY();\r
- // fix display to visibility\r
- fly(dom).fixDisplay(); \r
- \r
- // restore values after effect\r
- r = fly(dom).getFxRestore(); \r
- b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};\r
- b.right = b.x + b.width;\r
- b.bottom = b.y + b.height;\r
- \r
- // fixed size for slide\r
- fly(dom).setWidth(b.width).setHeight(b.height); \r
- \r
- // wrap if needed\r
- wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);\r
- \r
- st.visibility = VISIBLE;\r
- st.position = ABSOLUTE;\r
- \r
- // clear out temp styles after slide and unwrap\r
- function after(){\r
- fly(dom).fxUnwrap(wrap, r.pos, o);\r
- st.width = r.width;\r
- st.height = r.height;\r
- fly(dom).afterFx(o);\r
- }\r
- \r
- // time to calculate the positions \r
- pt = {to: [b.x, b.y]}; \r
- bw = {to: b.width};\r
- bh = {to: b.height};\r
- \r
- function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){ \r
- var ret = {};\r
- fly(wrap).setWidth(ww).setHeight(wh);\r
- if(fly(wrap)[sXY]){\r
- fly(wrap)[sXY](sXYval); \r
- }\r
- style[s1] = style[s2] = "0"; \r
- if(w){\r
- ret.width = w\r
- };\r
- if(h){\r
- ret.height = h;\r
- }\r
- if(p){\r
- ret.points = p;\r
- }\r
- return ret;\r
- };\r
-\r
- args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {\r
- t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],\r
- l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],\r
- r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],\r
- b : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],\r
- tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],\r
- bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],\r
- br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],\r
- tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]\r
- });\r
- \r
- st.visibility = VISIBLE;\r
- fly(wrap).show();\r
-\r
- arguments.callee.anim = fly(wrap).fxanim(args,\r
- o,\r
- MOTION,\r
- .5,\r
- EASEOUT, \r
- after);\r
- });\r
- return me;\r
- },\r
- \r
- /**\r
- * Slides the element out of view. An anchor point can be optionally passed to set the end point\r
- * for the slide effect. When the effect is completed, the element will be hidden (visibility = \r
- * 'hidden') but block elements will still take up space in the document. The element must be removed\r
- * from the DOM using the 'remove' config option if desired. This function automatically handles \r
- * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options.\r
- * Usage:\r
- *<pre><code>\r
-// default: slide the element out to the top\r
-el.slideOut();\r
-\r
-// custom: slide the element out to the right with a 2-second duration\r
-el.slideOut('r', { duration: 2 });\r
-\r
-// common config options shown with default values\r
-el.slideOut('t', {\r
- easing: 'easeOut',\r
- duration: .5,\r
- remove: false,\r
- useDisplay: false\r
-});\r
-</code></pre>\r
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- slideOut : function(anchor, o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- st = dom.style,\r
- xy = me.getXY(),\r
- wrap,\r
- r,\r
- b,\r
- a,\r
- zero = {to: 0}; \r
- \r
- anchor = anchor || "t";\r
-\r
- me.queueFx(o, function(){\r
- \r
- // restore values after effect\r
- r = fly(dom).getFxRestore(); \r
- b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};\r
- b.right = b.x + b.width;\r
- b.bottom = b.y + b.height;\r
- \r
- // fixed size for slide \r
- fly(dom).setWidth(b.width).setHeight(b.height);\r
-\r
- // wrap if needed\r
- wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);\r
- \r
- st.visibility = VISIBLE;\r
- st.position = ABSOLUTE;\r
- fly(wrap).setWidth(b.width).setHeight(b.height); \r
-\r
- function after(){\r
- o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); \r
- fly(dom).fxUnwrap(wrap, r.pos, o);\r
- st.width = r.width;\r
- st.height = r.height;\r
- fly(dom).afterFx(o);\r
- } \r
- \r
- function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){ \r
- var ret = {};\r
- \r
- style[s1] = style[s2] = "0";\r
- ret[p1] = v1; \r
- if(p2){\r
- ret[p2] = v2; \r
- }\r
- if(p3){\r
- ret[p3] = v3;\r
- }\r
- \r
- return ret;\r
- };\r
- \r
- a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {\r
- t : [st, LEFT, BOTTOM, HEIGHT, zero],\r
- l : [st, RIGHT, TOP, WIDTH, zero],\r
- r : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],\r
- b : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],\r
- tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],\r
- bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],\r
- br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],\r
- tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]\r
- });\r
- \r
- arguments.callee.anim = fly(wrap).fxanim(a,\r
- o,\r
- MOTION,\r
- .5,\r
- EASEOUT, \r
- after);\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Fades the element out while slowly expanding it in all directions. When the effect is completed, the \r
- * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. \r
- * The element must be removed from the DOM using the 'remove' config option if desired.\r
- * Usage:\r
- *<pre><code>\r
-// default\r
-el.puff();\r
-\r
-// common config options shown with default values\r
-el.puff({\r
- easing: 'easeOut',\r
- duration: .5,\r
- remove: false,\r
- useDisplay: false\r
-});\r
-</code></pre>\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- puff : function(o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- st = dom.style,\r
- width,\r
- height,\r
- r;\r
-\r
- me.queueFx(o, function(){\r
- width = fly(dom).getWidth();\r
- height = fly(dom).getHeight();\r
- fly(dom).clearOpacity();\r
- fly(dom).show();\r
-\r
- // restore values after effect\r
- r = fly(dom).getFxRestore(); \r
- \r
- function after(){\r
- o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); \r
- fly(dom).clearOpacity(); \r
- fly(dom).setPositioning(r.pos);\r
- st.width = r.width;\r
- st.height = r.height;\r
- st.fontSize = '';\r
- fly(dom).afterFx(o);\r
- } \r
-\r
- arguments.callee.anim = fly(dom).fxanim({\r
- width : {to : fly(dom).adjustWidth(width * 2)},\r
- height : {to : fly(dom).adjustHeight(height * 2)},\r
- points : {by : [-width * .5, -height * .5]},\r
- opacity : {to : 0},\r
- fontSize: {to : 200, unit: "%"}\r
- },\r
- o,\r
- MOTION,\r
- .5,\r
- EASEOUT,\r
- after);\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).\r
- * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still \r
- * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.\r
- * Usage:\r
- *<pre><code>\r
-// default\r
-el.switchOff();\r
-\r
-// all config options shown with default values\r
-el.switchOff({\r
- easing: 'easeIn',\r
- duration: .3,\r
- remove: false,\r
- useDisplay: false\r
-});\r
-</code></pre>\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- switchOff : function(o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- st = dom.style,\r
- r;\r
-\r
- me.queueFx(o, function(){\r
- fly(dom).clearOpacity();\r
- fly(dom).clip();\r
-\r
- // restore values after effect\r
- r = fly(dom).getFxRestore();\r
- \r
- function after(){\r
- o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); \r
- fly(dom).clearOpacity();\r
- fly(dom).setPositioning(r.pos);\r
- st.width = r.width;\r
- st.height = r.height; \r
- fly(dom).afterFx(o);\r
- };\r
-\r
- fly(dom).fxanim({opacity : {to : 0.3}}, \r
- NULL, \r
- NULL, \r
- .1, \r
- NULL, \r
- function(){ \r
- fly(dom).clearOpacity();\r
- (function(){ \r
- fly(dom).fxanim({\r
- height : {to : 1},\r
- points : {by : [0, fly(dom).getHeight() * .5]}\r
- }, \r
- o, \r
- MOTION, \r
- 0.3, \r
- 'easeIn', \r
- after);\r
- }).defer(100);\r
- });\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Highlights the Element by setting a color (applies to the background-color by default, but can be\r
- * changed using the "attr" config option) and then fading back to the original color. If no original\r
- * color is available, you should provide the "endColor" config option which will be cleared after the animation.\r
- * Usage:\r
-<pre><code>\r
-// default: highlight background to yellow\r
-el.highlight();\r
-\r
-// custom: highlight foreground text to blue for 2 seconds\r
-el.highlight("0000ff", { attr: 'color', duration: 2 });\r
-\r
-// common config options shown with default values\r
-el.highlight("ffff9c", {\r
- attr: "background-color", //can be any valid CSS property (attribute) that supports a color value\r
- endColor: (current color) or "ffffff",\r
- easing: 'easeIn',\r
- duration: 1\r
-});\r
-</code></pre>\r
- * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */ \r
- highlight : function(color, o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- attr = o.attr || "backgroundColor",\r
- a = {},\r
- restore;\r
-\r
- me.queueFx(o, function(){\r
- fly(dom).clearOpacity();\r
- fly(dom).show();\r
-\r
- function after(){\r
- dom.style[attr] = restore;\r
- fly(dom).afterFx(o);\r
- } \r
- restore = dom.style[attr];\r
- a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};\r
- arguments.callee.anim = fly(dom).fxanim(a,\r
- o,\r
- 'color',\r
- 1,\r
- 'easeIn', \r
- after);\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Shows a ripple of exploding, attenuating borders to draw attention to an Element.\r
- * Usage:\r
-<pre><code>\r
-// default: a single light blue ripple\r
-el.frame();\r
-\r
-// custom: 3 red ripples lasting 3 seconds total\r
-el.frame("ff0000", 3, { duration: 3 });\r
-\r
-// common config options shown with default values\r
-el.frame("C3DAF9", 1, {\r
- duration: 1 //duration of each individual ripple.\r
- // Note: Easing is not configurable and will be ignored if included\r
-});\r
-</code></pre>\r
- * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').\r
- * @param {Number} count (optional) The number of ripples to display (defaults to 1)\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- frame : function(color, count, o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- proxy,\r
- active;\r
-\r
- me.queueFx(o, function(){\r
- color = color || '#C3DAF9';\r
- if(color.length == 6){\r
- color = '#' + color;\r
- } \r
- count = count || 1;\r
- fly(dom).show();\r
-\r
- var xy = fly(dom).getXY(),\r
- b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},\r
- queue = function(){\r
- proxy = fly(document.body || document.documentElement).createChild({\r
- style:{\r
- position : ABSOLUTE,\r
- 'z-index': 35000, // yee haw\r
- border : '0px solid ' + color\r
- }\r
- });\r
- return proxy.queueFx({}, animFn);\r
- };\r
- \r
- \r
- arguments.callee.anim = {\r
- isAnimated: true,\r
- stop: function() {\r
- count = 0;\r
- proxy.stopFx();\r
- }\r
- };\r
- \r
- function animFn(){\r
- var scale = Ext.isBorderBox ? 2 : 1;\r
- active = proxy.anim({\r
- top : {from : b.y, to : b.y - 20},\r
- left : {from : b.x, to : b.x - 20},\r
- borderWidth : {from : 0, to : 10},\r
- opacity : {from : 1, to : 0},\r
- height : {from : b.height, to : b.height + 20 * scale},\r
- width : {from : b.width, to : b.width + 20 * scale}\r
- },{\r
- duration: o.duration || 1,\r
- callback: function() {\r
- proxy.remove();\r
- --count > 0 ? queue() : fly(dom).afterFx(o);\r
- }\r
- });\r
- arguments.callee.anim = {\r
- isAnimated: true,\r
- stop: function(){\r
- active.stop();\r
- }\r
- };\r
- };\r
- queue();\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Creates a pause before any subsequent queued effects begin. If there are\r
- * no effects queued after the pause it will have no effect.\r
- * Usage:\r
-<pre><code>\r
-el.pause(1);\r
-</code></pre>\r
- * @param {Number} seconds The length of time to pause (in seconds)\r
- * @return {Ext.Element} The Element\r
- */\r
- pause : function(seconds){ \r
- var dom = this.dom,\r
- t;\r
-\r
- this.queueFx({}, function(){\r
- t = setTimeout(function(){\r
- fly(dom).afterFx({});\r
- }, seconds * 1000);\r
- arguments.callee.anim = {\r
- isAnimated: true,\r
- stop: function(){\r
- clearTimeout(t);\r
- fly(dom).afterFx({});\r
- }\r
- };\r
- });\r
- return this;\r
- },\r
-\r
- /**\r
- * Fade an element in (from transparent to opaque). The ending opacity can be specified\r
- * using the <tt>{@link #endOpacity}</tt> config option.\r
- * Usage:\r
-<pre><code>\r
-// default: fade in from opacity 0 to 100%\r
-el.fadeIn();\r
-\r
-// custom: fade in from opacity 0 to 75% over 2 seconds\r
-el.fadeIn({ endOpacity: .75, duration: 2});\r
-\r
-// common config options shown with default values\r
-el.fadeIn({\r
- endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)\r
- easing: 'easeOut',\r
- duration: .5\r
-});\r
-</code></pre>\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- fadeIn : function(o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- to = o.endOpacity || 1;\r
- \r
- me.queueFx(o, function(){\r
- fly(dom).setOpacity(0);\r
- fly(dom).fixDisplay();\r
- dom.style.visibility = VISIBLE;\r
- arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},\r
- o, NULL, .5, EASEOUT, function(){\r
- if(to == 1){\r
- fly(dom).clearOpacity();\r
- }\r
- fly(dom).afterFx(o);\r
- });\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Fade an element out (from opaque to transparent). The ending opacity can be specified\r
- * using the <tt>{@link #endOpacity}</tt> config option. Note that IE may require\r
- * <tt>{@link #useDisplay}:true</tt> in order to redisplay correctly.\r
- * Usage:\r
-<pre><code>\r
-// default: fade out from the element's current opacity to 0\r
-el.fadeOut();\r
-\r
-// custom: fade out from the element's current opacity to 25% over 2 seconds\r
-el.fadeOut({ endOpacity: .25, duration: 2});\r
-\r
-// common config options shown with default values\r
-el.fadeOut({\r
- endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)\r
- easing: 'easeOut',\r
- duration: .5,\r
- remove: false,\r
- useDisplay: false\r
-});\r
-</code></pre>\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- fadeOut : function(o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- style = dom.style,\r
- to = o.endOpacity || 0; \r
- \r
- me.queueFx(o, function(){ \r
- arguments.callee.anim = fly(dom).fxanim({ \r
- opacity : {to : to}},\r
- o, \r
- NULL, \r
- .5, \r
- EASEOUT, \r
- function(){\r
- if(to == 0){\r
- Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ? \r
- style.display = "none" :\r
- style.visibility = HIDDEN;\r
- \r
- fly(dom).clearOpacity();\r
- }\r
- fly(dom).afterFx(o);\r
- });\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Animates the transition of an element's dimensions from a starting height/width\r
- * to an ending height/width. This method is a convenience implementation of {@link shift}.\r
- * Usage:\r
-<pre><code>\r
-// change height and width to 100x100 pixels\r
-el.scale(100, 100);\r
-\r
-// common config options shown with default values. The height and width will default to\r
-// the element's existing values if passed as null.\r
-el.scale(\r
- [element's width],\r
- [element's height], {\r
- easing: 'easeOut',\r
- duration: .35\r
- }\r
-);\r
-</code></pre>\r
- * @param {Number} width The new width (pass undefined to keep the original width)\r
- * @param {Number} height The new height (pass undefined to keep the original height)\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- scale : function(w, h, o){\r
- this.shift(Ext.apply({}, o, {\r
- width: w,\r
- height: h\r
- }));\r
- return this;\r
- },\r
-\r
- /**\r
- * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.\r
- * Any of these properties not specified in the config object will not be changed. This effect \r
- * requires that at least one new dimension, position or opacity setting must be passed in on\r
- * the config object in order for the function to have any effect.\r
- * Usage:\r
-<pre><code>\r
-// slide the element horizontally to x position 200 while changing the height and opacity\r
-el.shift({ x: 200, height: 50, opacity: .8 });\r
-\r
-// common config options shown with default values.\r
-el.shift({\r
- width: [element's width],\r
- height: [element's height],\r
- x: [element's x position],\r
- y: [element's y position],\r
- opacity: [element's opacity],\r
- easing: 'easeOut',\r
- duration: .35\r
-});\r
-</code></pre>\r
- * @param {Object} options Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- shift : function(o){\r
- o = getObject(o);\r
- var dom = this.dom,\r
- a = {};\r
- \r
- this.queueFx(o, function(){\r
- for (var prop in o) {\r
- if (o[prop] != UNDEFINED) { \r
- a[prop] = {to : o[prop]}; \r
- }\r
- } \r
- \r
- a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;\r
- a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a; \r
- \r
- if (a.x || a.y || a.xy) {\r
- a.points = a.xy || \r
- {to : [ a.x ? a.x.to : fly(dom).getX(),\r
- a.y ? a.y.to : fly(dom).getY()]}; \r
- }\r
-\r
- arguments.callee.anim = fly(dom).fxanim(a,\r
- o, \r
- MOTION, \r
- .35, \r
- EASEOUT, \r
- function(){\r
- fly(dom).afterFx(o);\r
- });\r
- });\r
- return this;\r
- },\r
-\r
- /**\r
- * Slides the element while fading it out of view. An anchor point can be optionally passed to set the \r
- * ending point of the effect.\r
- * Usage:\r
- *<pre><code>\r
-// default: slide the element downward while fading out\r
-el.ghost();\r
-\r
-// custom: slide the element out to the right with a 2-second duration\r
-el.ghost('r', { duration: 2 });\r
-\r
-// common config options shown with default values\r
-el.ghost('b', {\r
- easing: 'easeOut',\r
- duration: .5,\r
- remove: false,\r
- useDisplay: false\r
-});\r
-</code></pre>\r
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')\r
- * @param {Object} options (optional) Object literal with any of the Fx config options\r
- * @return {Ext.Element} The Element\r
- */\r
- ghost : function(anchor, o){\r
- o = getObject(o);\r
- var me = this,\r
- dom = me.dom,\r
- st = dom.style,\r
- a = {opacity: {to: 0}, points: {}},\r
- pt = a.points,\r
- r,\r
- w,\r
- h;\r
- \r
- anchor = anchor || "b";\r
-\r
- me.queueFx(o, function(){\r
- // restore values after effect\r
- r = fly(dom).getFxRestore();\r
- w = fly(dom).getWidth();\r
- h = fly(dom).getHeight();\r
- \r
- function after(){\r
- o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); \r
- fly(dom).clearOpacity();\r
- fly(dom).setPositioning(r.pos);\r
- st.width = r.width;\r
- st.height = r.height;\r
- fly(dom).afterFx(o);\r
- }\r
- \r
- pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {\r
- t : [0, -h],\r
- l : [-w, 0],\r
- r : [w, 0],\r
- b : [0, h],\r
- tl : [-w, -h],\r
- bl : [-w, h],\r
- br : [w, h],\r
- tr : [w, -h] \r
- });\r
- \r
- arguments.callee.anim = fly(dom).fxanim(a,\r
- o,\r
- MOTION,\r
- .5,\r
- EASEOUT, after);\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Ensures that all effects queued after syncFx is called on the element are\r
- * run concurrently. This is the opposite of {@link #sequenceFx}.\r
- * @return {Ext.Element} The Element\r
- */\r
- syncFx : function(){\r
- var me = this;\r
- me.fxDefaults = Ext.apply(me.fxDefaults || {}, {\r
- block : FALSE,\r
- concurrent : TRUE,\r
- stopFx : FALSE\r
- });\r
- return me;\r
- },\r
-\r
- /**\r
- * Ensures that all effects queued after sequenceFx is called on the element are\r
- * run in sequence. This is the opposite of {@link #syncFx}.\r
- * @return {Ext.Element} The Element\r
- */\r
- sequenceFx : function(){\r
- var me = this;\r
- me.fxDefaults = Ext.apply(me.fxDefaults || {}, {\r
- block : FALSE,\r
- concurrent : FALSE,\r
- stopFx : FALSE\r
- });\r
- return me;\r
- },\r
-\r
- /* @private */\r
- nextFx : function(){ \r
- var ef = getQueue(this.dom.id)[0];\r
- if(ef){\r
- ef.call(this);\r
- }\r
- },\r
-\r
- /**\r
- * Returns true if the element has any effects actively running or queued, else returns false.\r
- * @return {Boolean} True if element has active effects, else false\r
- */\r
- hasActiveFx : function(){\r
- return getQueue(this.dom.id)[0];\r
- },\r
-\r
- /**\r
- * Stops any running effects and clears the element's internal effects queue if it contains\r
- * any additional effects that haven't started yet.\r
- * @return {Ext.Element} The Element\r
- */\r
- stopFx : function(finish){\r
- var me = this,\r
- id = me.dom.id;\r
- if(me.hasActiveFx()){\r
- var cur = getQueue(id)[0];\r
- if(cur && cur.anim){\r
- if(cur.anim.isAnimated){\r
- setQueue(id, [cur]); //clear\r
- cur.anim.stop(finish !== undefined ? finish : TRUE);\r
- }else{\r
- setQueue(id, []);\r
- }\r
- }\r
- }\r
- return me;\r
- },\r
-\r
- /* @private */\r
- beforeFx : function(o){\r
- if(this.hasActiveFx() && !o.concurrent){\r
- if(o.stopFx){\r
- this.stopFx();\r
- return TRUE;\r
- }\r
- return FALSE;\r
- }\r
- return TRUE;\r
- },\r
-\r
- /**\r
- * Returns true if the element is currently blocking so that no other effect can be queued\r
- * until this effect is finished, else returns false if blocking is not set. This is commonly\r
- * used to ensure that an effect initiated by a user action runs to completion prior to the\r
- * same effect being restarted (e.g., firing only one effect even if the user clicks several times).\r
- * @return {Boolean} True if blocking, else false\r
- */\r
- hasFxBlock : function(){\r
- var q = getQueue(this.dom.id);\r
- return q && q[0] && q[0].block;\r
- },\r
-\r
- /* @private */\r
- queueFx : function(o, fn){\r
- var me = fly(this.dom);\r
- if(!me.hasFxBlock()){\r
- Ext.applyIf(o, me.fxDefaults);\r
- if(!o.concurrent){\r
- var run = me.beforeFx(o);\r
- fn.block = o.block;\r
- getQueue(me.dom.id).push(fn);\r
- if(run){\r
- me.nextFx();\r
- }\r
- }else{\r
- fn.call(me);\r
- }\r
- }\r
- return me;\r
- },\r
-\r
- /* @private */\r
- fxWrap : function(pos, o, vis){ \r
- var dom = this.dom,\r
- wrap,\r
- wrapXY;\r
- if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){ \r
- if(o.fixPosition){\r
- wrapXY = fly(dom).getXY();\r
- }\r
- var div = document.createElement("div");\r
- div.style.visibility = vis;\r
- wrap = dom.parentNode.insertBefore(div, dom);\r
- fly(wrap).setPositioning(pos);\r
- if(fly(wrap).isStyle(POSITION, "static")){\r
- fly(wrap).position("relative");\r
- }\r
- fly(dom).clearPositioning('auto');\r
- fly(wrap).clip();\r
- wrap.appendChild(dom);\r
- if(wrapXY){\r
- fly(wrap).setXY(wrapXY);\r
- }\r
- }\r
- return wrap;\r
- },\r
-\r
- /* @private */\r
- fxUnwrap : function(wrap, pos, o){ \r
- var dom = this.dom;\r
- fly(dom).clearPositioning();\r
- fly(dom).setPositioning(pos);\r
- if(!o.wrap){\r
- var pn = fly(wrap).dom.parentNode;
- pn.insertBefore(dom, wrap); \r
- fly(wrap).remove();\r
- }\r
- },\r
-\r
- /* @private */\r
- getFxRestore : function(){\r
- var st = this.dom.style;\r
- return {pos: this.getPositioning(), width: st.width, height : st.height};\r
- },\r
-\r
- /* @private */\r
- afterFx : function(o){\r
- var dom = this.dom,\r
- id = dom.id;\r
- if(o.afterStyle){\r
- fly(dom).setStyle(o.afterStyle); \r
- }\r
- if(o.afterCls){\r
- fly(dom).addClass(o.afterCls);\r
- }\r
- if(o.remove == TRUE){\r
- fly(dom).remove();\r
- }\r
- if(o.callback){\r
- o.callback.call(o.scope, fly(dom));\r
- }\r
- if(!o.concurrent){\r
- getQueue(id).shift();\r
- fly(dom).nextFx();\r
- }\r
- },\r
-\r
- /* @private */\r
- fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){\r
- animType = animType || 'run';\r
- opt = opt || {};\r
- var anim = Ext.lib.Anim[animType](\r
- this.dom, \r
- args,\r
- (opt.duration || defaultDur) || .35,\r
- (opt.easing || defaultEase) || EASEOUT,\r
- cb, \r
- this\r
- );\r
- opt.anim = anim;\r
- return anim;\r
- }\r
-};\r
-\r
-// backwards compat\r
-Ext.Fx.resize = Ext.Fx.scale;\r
-\r
-//When included, Ext.Fx is automatically applied to Element so that all basic\r
-//effects are available directly via the Element API\r
-Ext.Element.addMethods(Ext.Fx);\r
git.ithinksw.org / extjs.git / blobdiff