JavaScript

开发平台：

JavaScript

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

* <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},
* {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}). The markup
* is of this form:</p>
* <pre><code>
Ext.Element.boxMarkup =
'<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
<div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
<div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
* </code></pre>
* <p>Example usage:</p>
* <pre><code>
// Basic box wrap
Ext.get("foo").boxWrap();
// You can also add a custom class and use CSS inheritance rules to customize the box look.
// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
// for how to create a custom box wrap style.
Ext.get("foo").boxWrap().addClass("x-box-blue");
* </code></pre>
* @param {String} class (optional) A base CSS class to apply to the containing wrapper element
* (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on
* this name to make the overall effect work, so if you supply an alternate base class, make sure you
* also supply all of the necessary rules.
* @return {Ext.Element} The outermost wrapping element of the created box structure.
*/
boxWrap : function(cls){
cls = cls || 'x-box';
var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>")); //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));
Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
return el;
},
/**
* Set the size of this Element. If animation is true, both width and height will be animated concurrently.
* @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
* <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
* <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>
* </ul></div>
* @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li>
* <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
* </ul></div>
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
setSize : function(width, height, animate){
var me = this;
if(Ext.isObject(width)){ // in case of object from getSize()
height = width.height;
width = width.width;
}
width = me.adjustWidth(width);
height = me.adjustHeight(height);
if(!animate || !me.anim){
me.dom.style.width = me.addUnits(width);
me.dom.style.height = me.addUnits(height);
}else{
me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));
}
return me;
},
/**
* Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
* when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
* if a height has not been set using CSS.
* @return {Number}
*/
getComputedHeight : function(){
var me = this,
h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
if(!h){
h = parseInt(me.getStyle('height'), 10) || 0;
if(!me.isBorderBox()){
h += me.getFrameWidth('tb');
}
}
return h;
},
/**
* Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
* when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
* if a width has not been set using CSS.
* @return {Number}
*/
getComputedWidth : function(){
var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
if(!w){
w = parseInt(this.getStyle('width'), 10) || 0;
if(!this.isBorderBox()){
w += this.getFrameWidth('lr');
}
}
return w;
},
/**
* Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
for more information about the sides.
* @param {String} sides
* @return {Number}
*/
getFrameWidth : function(sides, onlyContentBox){
return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
},
/**
* Sets up event handlers to add and remove a css class when the mouse is over this element
* @param {String} className
* @return {Ext.Element} this
*/
addClassOnOver : function(className){
this.hover(
function(){
Ext.fly(this, INTERNAL).addClass(className);
},
function(){
Ext.fly(this, INTERNAL).removeClass(className);
}
);
return this;
},
/**
* Sets up event handlers to add and remove a css class when this element has the focus
* @param {String} className
* @return {Ext.Element} this
*/
addClassOnFocus : function(className){
this.on("focus", function(){
Ext.fly(this, INTERNAL).addClass(className);
}, this.dom);
this.on("blur", function(){
Ext.fly(this, INTERNAL).removeClass(className);
}, this.dom);
return this;
},
/**
* Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
* @param {String} className
* @return {Ext.Element} this
*/
addClassOnClick : function(className){
var dom = this.dom;
this.on("mousedown", function(){
Ext.fly(dom, INTERNAL).addClass(className);
var d = Ext.getDoc(),
fn = function(){
Ext.fly(dom, INTERNAL).removeClass(className);
d.removeListener("mouseup", fn);
};
d.on("mouseup", fn);
});
return this;
},
/**
* <p>Returns the dimensions of the element available to lay content out in.<p>
* <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>
* example:<pre><code>
var vpSize = Ext.getBody().getViewSize();
// all Windows created afterwards will have a default value of 90% height and 95% width
Ext.Window.override({
width: vpSize.width * 0.9,
height: vpSize.height * 0.95
});
// To handle window resizing you would have to hook onto onWindowResize.
</code></pre>
* @param {Boolean} contentBox True to return the W3 content box <i>within</i> the padding area of the element. False
* or omitted to return the full area of the element within the border. See <a href="http://www.w3.org/TR/CSS2/box.html">http://www.w3.org/TR/CSS2/box.html</a>
* @return {Object} An object containing the elements's area: <code>{width: <element width>, height: <element height>}</code>
*/
getViewSize : function(contentBox){
var doc = document,
me = this,
d = me.dom,
extdom = Ext.lib.Dom,
isDoc = (d == doc || d == doc.body),
isBB, w, h, tbBorder = 0, lrBorder = 0,
tbPadding = 0, lrPadding = 0;
if (isDoc) {
return { width: extdom.getViewWidth(), height: extdom.getViewHeight() };
}
isBB = me.isBorderBox();
tbBorder = me.getBorderWidth('tb');
lrBorder = me.getBorderWidth('lr');
tbPadding = me.getPadding('tb');
lrPadding = me.getPadding('lr');
// Width calcs
// Try the style first, then clientWidth, then offsetWidth
if (w = me.getStyle('width').match(pxMatch)){
if ((w = parseInt(w[1], 10)) && isBB){
// Style includes the padding and border if isBB
w -= (lrBorder + lrPadding);
}
if (!contentBox){
w += lrPadding;
}
} else {
if (!(w = d.clientWidth) && (w = d.offsetWidth)){
w -= lrBorder;
}
if (w && contentBox){
w -= lrPadding;
}
}
// Height calcs
// Try the style first, then clientHeight, then offsetHeight
if (h = me.getStyle('height').match(pxMatch)){
if ((h = parseInt(h[1], 10)) && isBB){
// Style includes the padding and border if isBB
h -= (tbBorder + tbPadding);
}
if (!contentBox){
h += tbPadding;
}
} else {
if (!(h = d.clientHeight) && (h = d.offsetHeight)){
h -= tbBorder;
}
if (h && contentBox){
h -= tbPadding;
}
}
return {
width : w,
height : h
};
},
/**
* Returns the size of the element.
* @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
* @return {Object} An object containing the element's size {width: (element width), height: (element height)}
*/
getSize : function(contentSize){
return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
},
/**
* Forces the browser to repaint this element
* @return {Ext.Element} this
*/
repaint : function(){
var dom = this.dom;
this.addClass("x-repaint");
setTimeout(function(){
Ext.fly(dom).removeClass("x-repaint");
}, 1);
return this;
},
/**
* Disables text selection for this element (normalized across browsers)
* @return {Ext.Element} this
*/
unselectable : function(){
this.dom.unselectable = "on";
return this.swallowEvent("selectstart", true).
applyStyles("-moz-user-select:none;-khtml-user-select:none;").
addClass("x-unselectable");
},
/**
* Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
* then it returns the calculated width of the sides (see getPadding)
* @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
* @return {Object/Number}
*/
getMargins : function(side){
var me = this,
key,
hash = {t:"top", l:"left", r:"right", b: "bottom"},
o = {};
if (!side) {
for (key in me.margins){
o[hash[key]] = parseInt(me.getStyle(me.margins[key]), 10) || 0;
}
return o;
} else {
return me.addStyles.call(me, side, me.margins);
}
}
};
}());
/**
* @class Ext.Element
*/
(function(){
var D = Ext.lib.Dom,
LEFT = "left",
RIGHT = "right",
TOP = "top",
BOTTOM = "bottom",
POSITION = "position",
STATIC = "static",
RELATIVE = "relative",
AUTO = "auto",
ZINDEX = "z-index";
Ext.Element.addMethods({
/**
* Gets the current X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
* @return {Number} The X position of the element
*/
getX : function(){
return D.getX(this.dom);
},
/**
* Gets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
* @return {Number} The Y position of the element
*/
getY : function(){
return D.getY(this.dom);
},
/**
* Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
* @return {Array} The XY position of the element
*/
getXY : function(){
return D.getXY(this.dom);
},
/**
* Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have display:none to have page coordinates.
* @param {Mixed} element The element to get the offsets from.
* @return {Array} The XY page offsets (e.g. [100, -200])
*/
getOffsetsTo : function(el){
var o = this.getXY(),
e = Ext.fly(el, '_internal').getXY();
return [o[0]-e[0],o[1]-e[1]];
},
/**
* Sets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
* @param {Number} The X position of the element
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
setX : function(x, animate){
return this.setXY([x, this.getY()], this.animTest(arguments, animate, 1));
},
/**
* Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
* @param {Number} The Y position of the element
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
setY : function(y, animate){
return this.setXY([this.getX(), y], this.animTest(arguments, animate, 1));
},
/**
* Sets the element's left position directly using CSS style (instead of {@link #setX}).
* @param {String} left The left CSS property value
* @return {Ext.Element} this
*/
setLeft : function(left){
this.setStyle(LEFT, this.addUnits(left));
return this;
},
/**
* Sets the element's top position directly using CSS style (instead of {@link #setY}).
* @param {String} top The top CSS property value
* @return {Ext.Element} this
*/
setTop : function(top){
this.setStyle(TOP, this.addUnits(top));
return this;
},
/**
* Sets the element's CSS right style.
* @param {String} right The right CSS property value
* @return {Ext.Element} this
*/
setRight : function(right){
this.setStyle(RIGHT, this.addUnits(right));
return this;
},
/**
* Sets the element's CSS bottom style.
* @param {String} bottom The bottom CSS property value
* @return {Ext.Element} this
*/
setBottom : function(bottom){
this.setStyle(BOTTOM, this.addUnits(bottom));
return this;
},
/**
* Sets the position of the element in page coordinates, regardless of how the element is positioned.
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
* @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
setXY : function(pos, animate){
var me = this;
if(!animate || !me.anim){
D.setXY(me.dom, pos);
}else{
me.anim({points: {to: pos}}, me.preanim(arguments, 1), 'motion');
}
return me;
},
/**
* Sets the position of the element in page coordinates, regardless of how the element is positioned.
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
* @param {Number} x X value for new position (coordinates are page-based)
* @param {Number} y Y value for new position (coordinates are page-based)
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
setLocation : function(x, y, animate){
return this.setXY([x, y], this.animTest(arguments, animate, 2));
},
/**
* Sets the position of the element in page coordinates, regardless of how the element is positioned.
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
* @param {Number} x X value for new position (coordinates are page-based)
* @param {Number} y Y value for new position (coordinates are page-based)
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
moveTo : function(x, y, animate){
return this.setXY([x, y], this.animTest(arguments, animate, 2));
},
/**
* Gets the left X coordinate
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getLeft : function(local){
return !local ? this.getX() : parseInt(this.getStyle(LEFT), 10) || 0;
},
/**
* Gets the right X coordinate of the element (element X position + element width)
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getRight : function(local){
var me = this;
return !local ? me.getX() + me.getWidth() : (me.getLeft(true) + me.getWidth()) || 0;
},
/**
* Gets the top Y coordinate
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getTop : function(local) {
return !local ? this.getY() : parseInt(this.getStyle(TOP), 10) || 0;
},
/**
* Gets the bottom Y coordinate of the element (element Y position + element height)
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getBottom : function(local){
var me = this;
return !local ? me.getY() + me.getHeight() : (me.getTop(true) + me.getHeight()) || 0;
},
/**
* Initializes positioning on this element. If a desired position is not passed, it will make the
* the element positioned relative IF it is not already positioned.
* @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"
* @param {Number} zIndex (optional) The zIndex to apply
* @param {Number} x (optional) Set the page X position
* @param {Number} y (optional) Set the page Y position
*/
position : function(pos, zIndex, x, y){
var me = this;
if(!pos && me.isStyle(POSITION, STATIC)){
me.setStyle(POSITION, RELATIVE);
} else if(pos) {
me.setStyle(POSITION, pos);
}
if(zIndex){
me.setStyle(ZINDEX, zIndex);
}
if(x || y) me.setXY([x || false, y || false]);
},
/**
* 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(ZINDEX)
};
},
/**
* Set positioning with an object returned by getPositioning().
* @param {Object} posCfg
* @return {Ext.Element} this
*/
setPositioning : function(pc){
var me = this,
style = me.dom.style;
me.setStyle(pc);
if(pc.right == AUTO){
style.right = "";
}
if(pc.bottom == AUTO){
style.bottom = "";
}
return me;
},
/**
* Translates the passed page coordinates into left/top css values for this element
* @param {Number/Array} x The page x or an array containing [x, y]
* @param {Number} y (optional) The page y, required if x is not an array
* @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
*/
translatePoints : function(x, y){
y = isNaN(x[1]) ? y : x[1];
x = isNaN(x[0]) ? x : x[0];
var me = this,
relative = me.isStyle(POSITION, RELATIVE),
o = me.getXY(),
l = parseInt(me.getStyle(LEFT), 10),
t = parseInt(me.getStyle(TOP), 10);
l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft);
t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop);
return {left: (x - o[0] + l), top: (y - o[1] + t)};
},
animTest : function(args, animate, i) {
return !!animate && this.preanim ? this.preanim(args, i) : false;
}
});
})();/**
* @class Ext.Element
*/
Ext.Element.addMethods({
/**
* Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.
* @param {Object} box The box to fill {x, y, width, height}
* @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
setBox : function(box, adjust, animate){
var me = this,
w = box.width,
h = box.height;
if((adjust && !me.autoBoxAdjust) && !me.isBorderBox()){
w -= (me.getBorderWidth("lr") + me.getPadding("lr"));
h -= (me.getBorderWidth("tb") + me.getPadding("tb"));
}
me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2));
return me;
},
/**
* Return an object defining the area of this Element which can be passed to {@link #setBox} to
* set another Element's size/location to match this element.
* @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
* @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
* @return {Object} box An object in the format<pre><code>
{
x: <Element's X position>,
y: <Element's Y position>,
width: <Element's width>,
height: <Element's height>,
bottom: <Element's lower bound>,
right: <Element's rightmost bound>
}
</code></pre>
* The returned object may also be addressed as an Array where index 0 contains the X position
* and index 1 contains the Y position. So the result may also be used for {@link #setXY}
*/
getBox : function(contentBox, local) {
var me = this,
xy,
left,
top,
getBorderWidth = me.getBorderWidth,
getPadding = me.getPadding,
l,
r,
t,
b;
if(!local){
xy = me.getXY();
}else{
left = parseInt(me.getStyle("left"), 10) || 0;
top = parseInt(me.getStyle("top"), 10) || 0;
xy = [left, top];
}
var el = me.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
if(!contentBox){
bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
}else{
l = getBorderWidth.call(me, "l") + getPadding.call(me, "l");
r = getBorderWidth.call(me, "r") + getPadding.call(me, "r");
t = getBorderWidth.call(me, "t") + getPadding.call(me, "t");
b = getBorderWidth.call(me, "b") + getPadding.call(me, "b");
bx = {x: xy[0]+l, y: xy[1]+t, 0: xy[0]+l, 1: xy[1]+t, width: w-(l+r), height: h-(t+b)};
}
bx.right = bx.x + bx.width;
bx.bottom = bx.y + bx.height;
return bx;
},
/**
* 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 me = this,
xy = me.getXY(),
x = xy[0],
y = xy[1],
left = [x - distance, y],
right = [x + distance, y],
top = [x, y - distance],
bottom = [x, y + distance],
hash = {
l : left,
left : left,
r : right,
right : right,
t : top,
top : top,
up : top,
b : bottom,
bottom : bottom,
down : bottom
};
direction = direction.toLowerCase();
me.moveTo(hash[direction][0], hash[direction][1], me.animTest.call(me, arguments, animate, 2));
},
/**
* 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){
var me = this,
style = me.dom.style;
style.left = me.addUnits(left);
style.top = me.addUnits(top);
return me;
},
/**
* Returns the region of the given element.
* The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
* @return {Region} A Ext.lib.Region containing "top, left, bottom, right" member data.
*/
getRegion : function(){
return Ext.lib.Dom.getRegion(this.dom);
},
/**
* Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
* @param {Number} x X value for new position (coordinates are page-based)
* @param {Number} y Y value for new position (coordinates are page-based)
* @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels)</li>
* <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
* </ul></div>
* @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels)</li>
* <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
* </ul></div>
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
setBounds : function(x, y, width, height, animate){
var me = this;
if (!animate || !me.anim) {
me.setSize(width, height);
me.setLocation(x, y);
} else {
me.anim({points: {to: [x, y]},
width: {to: me.adjustWidth(width)},
height: {to: me.adjustHeight(height)}},
me.preanim(arguments, 4),
'motion');
}
return me;
},
/**
* Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.
* @param {Ext.lib.Region} region The region to fill
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
setRegion : function(region, animate) {
return this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.animTest.call(this, arguments, animate, 1));
}
});/**
* @class Ext.Element
*/
Ext.Element.addMethods({
/**
* Returns true if this element is scrollable.
* @return {Boolean}
*/
isScrollable : function(){
var dom = this.dom;
return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
},
/**
* 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().
* @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
* @param {Number} value The new scroll value.
* @return {Element} this
*/
scrollTo : function(side, value){
this.dom["scroll" + (/top/i.test(side) ? "Top" : "Left")] = value;
return this;
},
/**
* Returns the current scroll position of the element.
* @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
*/
getScroll : function(){
var d = this.dom,
doc = document,
body = doc.body,
docElement = doc.documentElement,
l,
t,
ret;
if(d == doc || d == body){
if(Ext.isIE && Ext.isStrict){
l = docElement.scrollLeft;
t = docElement.scrollTop;
}else{
l = window.pageXOffset;
t = window.pageYOffset;
}
ret = {left: l || (body ? body.scrollLeft : 0), top: t || (body ? body.scrollTop : 0)};
}else{
ret = {left: d.scrollLeft, top: d.scrollTop};
}
return ret;
}
});/**
* @class Ext.Element
*/
Ext.Element.addMethods({
/**
* 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().
* @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
* @param {Number} value The new scroll value
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Element} this
*/
scrollTo : function(side, value, animate){
var top = /top/i.test(side), //check if we're scrolling top or left
me = this,
dom = me.dom,
prop;
if (!animate || !me.anim) {
prop = 'scroll' + (top ? 'Top' : 'Left'), // just setting the value, so grab the direction
dom[prop] = value;
}else{
prop = 'scroll' + (top ? 'Left' : 'Top'), // if scrolling top, we need to grab scrollLeft, if left, scrollTop
me.anim({scroll: {to: top ? [dom[prop], value] : [value, dom[prop]]}},
me.preanim(arguments, 2), 'scroll');
}
return me;
},
/**
* Scrolls this element into view within the passed container.
* @param {Mixed} container (optional) The container element to scroll (defaults to document.body). Should be a
* string (id), dom node, or Ext.Element.
* @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
* @return {Ext.Element} this
*/
scrollIntoView : function(container, hscroll){
var c = Ext.getDom(container) || Ext.getBody().dom,
el = this.dom,
o = this.getOffsetsTo(c),
l = o[0] + c.scrollLeft,
t = o[1] + c.scrollTop,
b = t + el.offsetHeight,
r = l + el.offsetWidth,
ch = c.clientHeight,
ct = parseInt(c.scrollTop, 10),
cl = parseInt(c.scrollLeft, 10),
cb = ct + ch,
cr = cl + c.clientWidth;
if (el.offsetHeight > ch || t < ct) {
c.scrollTop = t;
} else if (b > cb){
c.scrollTop = b-ch;
}
c.scrollTop = c.scrollTop; // corrects IE, other browsers will ignore
if(hscroll !== false){
if(el.offsetWidth > c.clientWidth || l < cl){
c.scrollLeft = l;
}else if(r > cr){
c.scrollLeft = r - c.clientWidth;
}
c.scrollLeft = c.scrollLeft;
}
return this;
},
// private
scrollChildIntoView : function(child, hscroll){
Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
},
/**
* Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
* within this element's scrollable range.
* @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 scroll the element in pixels
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Boolean} Returns true if a scroll was triggered or false if the element
* was scrolled as far as it could go.
*/
scroll : function(direction, distance, animate){
if(!this.isScrollable()){
return;
}
var el = this.dom,
l = el.scrollLeft, t = el.scrollTop,
w = el.scrollWidth, h = el.scrollHeight,
cw = el.clientWidth, ch = el.clientHeight,
scrolled = false, v,
hash = {
l: Math.min(l + distance, w-cw),
r: v = Math.max(l - distance, 0),
t: Math.max(t - distance, 0),
b: Math.min(t + distance, h-ch)
};
hash.d = hash.b;
hash.u = hash.t;
direction = direction.substr(0, 1);
if((v = hash[direction]) > -1){
scrolled = true;
this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.preanim(arguments, 2));
}
return scrolled;
}
});/**
* @class Ext.Element
*/
/**
* Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
* @static
* @type Number
*/
Ext.Element.VISIBILITY = 1;
/**
* Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
* @static
* @type Number
*/
Ext.Element.DISPLAY = 2;
Ext.Element.addMethods(function(){
var VISIBILITY = "visibility",
DISPLAY = "display",
HIDDEN = "hidden",
NONE = "none",
ORIGINALDISPLAY = 'originalDisplay',
VISMODE = 'visibilityMode',
ELDISPLAY = Ext.Element.DISPLAY,
data = Ext.Element.data,
getDisplay = function(dom){
var d = data(dom, ORIGINALDISPLAY);
if(d === undefined){
data(dom, ORIGINALDISPLAY, d = '');
}
return d;
},
getVisMode = function(dom){
var m = data(dom, VISMODE);
if(m === undefined){
data(dom, VISMODE, m = 1)
}
return m;
};
return {
/**
* The element's default display mode (defaults to "")
* @type String
*/
originalDisplay : "",
visibilityMode : 1,
/**
* Sets the element's visibility mode. When setVisible() is called it
* will use this to determine whether to set the visibility or the display property.
* @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
* @return {Ext.Element} this
*/
setVisibilityMode : function(visMode){
data(this.dom, VISMODE, visMode);
return this;
},
/**
* Perform custom animation on this element.
* <div><ul class="mdetail-params">
* <li><u>Animation Properties</u></li>
*
* <p>The Animation Control Object enables gradual transitions for any member of an
* element's style object that takes a numeric value including but not limited to
* these properties:</p><div><ul class="mdetail-params">
* <li><tt>bottom, top, left, right</tt></li>
* <li><tt>height, width</tt></li>
* <li><tt>margin, padding</tt></li>
* <li><tt>borderWidth</tt></li>
* <li><tt>opacity</tt></li>
* <li><tt>fontSize</tt></li>
* <li><tt>lineHeight</tt></li>
* </ul></div>
*
*
* <li><u>Animation Property Attributes</u></li>
*
* <p>Each Animation Property is a config object with optional properties:</p>
* <div><ul class="mdetail-params">
* <li><tt>by</tt>* : relative change - start at current value, change by this value</li>
* <li><tt>from</tt> : ignore current value, start from this value</li>
* <li><tt>to</tt>* : start at current value, go to this value</li>
* <li><tt>unit</tt> : any allowable unit specification</li>
* <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>
* </ul></div>
*
* <li><u>Animation Types</u></li>
*
* <p>The supported animation types:</p><div><ul class="mdetail-params">
* <li><tt>'run'</tt> : Default
* <pre><code>
var el = Ext.get('complexEl');
el.animate(
// animation control object
{
borderWidth: {to: 3, from: 0},
opacity: {to: .3, from: 1},
height: {to: 50, from: el.getHeight()},
width: {to: 300, from: el.getWidth()},
top : {by: - 100, unit: 'px'},
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'run' // animation type ('run','color','motion','scroll')
);
* </code></pre>
* </li>
* <li><tt>'color'</tt>
* <p>Animates transition of background, text, or border colors.</p>
* <pre><code>
el.animate(
// animation control object
{
color: { to: '#06e' },
backgroundColor: { to: '#e06' }
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'color' // animation type ('run','color','motion','scroll')
);
* </code></pre>
* </li>
*
* <li><tt>'motion'</tt>
* <p>Animates the motion of an element to/from specific points using optional bezier
* way points during transit.</p>
* <pre><code>
el.animate(
// animation control object
{
borderWidth: {to: 3, from: 0},
opacity: {to: .3, from: 1},
height: {to: 50, from: el.getHeight()},
width: {to: 300, from: el.getWidth()},
top : {by: - 100, unit: 'px'},
points: {
to: [50, 100], // go to this point
control: [ // optional bezier way points
[ 600, 800],
[-100, 200]
]
}
},
3000, // animation duration (milliseconds!)
null, // callback
'easeOut', // easing method
'motion' // animation type ('run','color','motion','scroll')
);
* </code></pre>
* </li>
* <li><tt>'scroll'</tt>
* <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>
* <pre><code>
el.animate(
// animation control object
{
scroll: {to: [400, 300]}
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'scroll' // animation type ('run','color','motion','scroll')
);
* </code></pre>
* </li>
* </ul></div>
*
* </ul></div>
*
* @param {Object} args The animation control args
* @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)
* @param {Function} onComplete (optional) Function to call when animation completes
* @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)
* @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,
* <tt>'motion'</tt>, or <tt>'scroll'</tt>
* @return {Ext.Element} this
*/
animate : function(args, duration, onComplete, easing, animType){
this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
return this;
},
/*
* @private Internal animation call
*/
anim : function(args, opt, animType, defaultDur, defaultEase, cb){
animType = animType || 'run';
opt = opt || {};
var me = this,
anim = Ext.lib.Anim[animType](
me.dom,
args,
(opt.duration || defaultDur) || .35,
(opt.easing || defaultEase) || 'easeOut',
function(){
if(cb) cb.call(me);
if(opt.callback) opt.callback.call(opt.scope || me, me, opt);
},
me
);
opt.anim = anim;
return anim;
},
// private legacy anim prep
preanim : function(a, i){
return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
},
/**
* Checks whether the element is currently visible using both visibility and display properties.
* @return {Boolean} True if the element is currently visible, else false
*/
isVisible : function() {
return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);
},
/**
* Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
* the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
* @param {Boolean} visible Whether the element is visible
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
setVisible : function(visible, animate){
var me = this,
dom = me.dom,
isDisplay = getVisMode(this.dom) == ELDISPLAY;
if (!animate || !me.anim) {
if(isDisplay){
me.setDisplayed(visible);
}else{
me.fixDisplay();
dom.style.visibility = visible ? "visible" : HIDDEN;
}
}else{
// closure for composites
if(visible){
me.setOpacity(.01);
me.setVisible(true);
}
me.anim({opacity: { to: (visible?1:0) }},
me.preanim(arguments, 1),
null,
.35,
'easeIn',
function(){
if(!visible){
dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN;
Ext.fly(dom).setOpacity(1);
}
});
}
return me;
},
/**
* Toggles the element's visibility or display, depending on visibility mode.
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
toggle : function(animate){
var me = this;
me.setVisible(!me.isVisible(), me.preanim(arguments, 0));
return me;
},
/**
* Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
* @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
* @return {Ext.Element} this
*/
setDisplayed : function(value) {
if(typeof value == "boolean"){
value = value ? getDisplay(this.dom) : NONE;
}
this.setStyle(DISPLAY, value);
return this;
},
// private
fixDisplay : function(){
var me = this;
if(me.isStyle(DISPLAY, NONE)){
me.setStyle(VISIBILITY, HIDDEN);
me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block
me.setStyle(DISPLAY, "block");
}
}
},
/**
* 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;
}
}
}());/**
* @class Ext.Element
*/
Ext.Element.addMethods(
function(){
var VISIBILITY = "visibility",
DISPLAY = "display",
HIDDEN = "hidden",
NONE = "none",
XMASKED = "x-masked",
XMASKEDRELATIVE = "x-masked-relative",
data = Ext.Element.data;
return {
/**
* Checks whether the element is currently visible using both visibility and display properties.
* @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
* @return {Boolean} True if the element is currently visible, else false
*/
isVisible : function(deep) {
var vis = !this.isStyle(VISIBILITY,HIDDEN) && !this.isStyle(DISPLAY,NONE),
p = this.dom.parentNode;
if(deep !== true || !vis){
return vis;
}
while(p && !/body/i.test(p.tagName)){
if(!Ext.fly(p, '_isVisible').isVisible()){
return false;
}
p = p.parentNode;
}
return true;
},
/**
* Returns true if display is not "none"
* @return {Boolean}
*/
isDisplayed : function() {
return !this.isStyle(DISPLAY, NONE);
},
/**
* Convenience method for setVisibilityMode(Element.DISPLAY)
* @param {String} display (optional) What to set display to when visible
* @return {Ext.Element} this
*/
enableDisplayMode : function(display){
this.setVisibilityMode(Ext.Element.DISPLAY);
if(!Ext.isEmpty(display)){
data(this.dom, 'originalDisplay', display);
}
return this;
},
/**
* Puts a mask over this element to disable user interaction. Requires core.css.
* This method can only be applied to elements which accept child nodes.
* @param {String} msg (optional) A message to display in the mask
* @param {String} msgCls (optional) A css class to apply to the msg element
* @return {Element} The mask element
*/
mask : function(msg, msgCls){
var me = this,
dom = me.dom,
dh = Ext.DomHelper,
EXTELMASKMSG = "ext-el-mask-msg",
el,
mask;
if(me.getStyle("position") == "static"){
me.addClass(XMASKEDRELATIVE);
}
if((el = data(dom, 'maskMsg'))){
el.remove();
}
if((el = data(dom, 'mask'))){
el.remove();
}
mask = dh.append(dom, {cls : "ext-el-mask"}, true);
data(dom, 'mask', mask);
me.addClass(XMASKED);
mask.setDisplayed(true);
if(typeof msg == 'string'){
var mm = dh.append(dom, {cls : EXTELMASKMSG, cn:{tag:'div'}}, true);
data(dom, 'maskMsg', mm);
mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;
mm.dom.firstChild.innerHTML = msg;
mm.setDisplayed(true);
mm.center(me);
}
if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto'){ // ie will not expand full height automatically
mask.setSize(undefined, me.getHeight());
}
return mask;
},
/**
* Removes a previously applied mask.
*/
unmask : function(){
var me = this,
dom = me.dom,
mask = data(dom, 'mask'),
maskMsg = data(dom, 'maskMsg');
if(mask){
if(maskMsg){
maskMsg.remove();
data(dom, 'maskMsg', undefined);
}
mask.remove();
data(dom, 'mask', undefined);
}
me.removeClass([XMASKED, XMASKEDRELATIVE]);
},
/**
* Returns true if this element is masked
* @return {Boolean}
*/
isMasked : function(){
var m = data(this.dom, 'mask');
return m && m.isVisible();
},
/**
* Creates an iframe shim for this element to keep selects and other windowed objects from
* showing through.
* @return {Ext.Element} The new shim element
*/
createShim : function(){
var el = document.createElement('iframe'),
shim;
el.frameBorder = '0';
el.className = 'ext-shim';
el.src = Ext.SSL_SECURE_URL;
shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
shim.autoBoxAdjust = false;
return shim;
}
};
}());/**
* @class Ext.Element
*/
Ext.Element.addMethods({
/**
* Convenience method for constructing a KeyMap
* @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:
* <code>{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}</code>
* @param {Function} fn The function to call
* @param {Object} scope (optional) The scope (<code>this</code> reference) in which the specified function is executed. Defaults to this Element.
* @return {Ext.KeyMap} The KeyMap created
*/
addKeyListener : function(key, fn, scope){
var config;
if(!Ext.isObject(key) || Ext.isArray(key)){
config = {
key: key,
fn: fn,
scope: scope
};
}else{
config = {
key : key.key,
shift : key.shift,
ctrl : key.ctrl,
alt : key.alt,
fn: fn,
scope: scope
};
}
return new Ext.KeyMap(this, config);
},
/**
* Creates a KeyMap for this element
* @param {Object} config The KeyMap config. See {@link Ext.KeyMap} for more details
* @return {Ext.KeyMap} The KeyMap created
*/
addKeyMap : function(config){
return new Ext.KeyMap(this, config);
}
});(function(){
// contants
var NULL = null,
UNDEFINED = undefined,
TRUE = true,
FALSE = false,
SETX = "setX",
SETY = "setY",
SETXY = "setXY",
LEFT = "left",
BOTTOM = "bottom",
TOP = "top",
RIGHT = "right",
HEIGHT = "height",
WIDTH = "width",
POINTS = "points",
HIDDEN = "hidden",
ABSOLUTE = "absolute",
VISIBLE = "visible",
MOTION = "motion",
POSITION = "position",
EASEOUT = "easeOut",
/*
* Use a light flyweight here since we are using so many callbacks and are always assured a DOM element
*/
flyEl = new Ext.Element.Flyweight(),
queues = {},
getObject = function(o){
return o || {};
},
fly = function(dom){
flyEl.dom = dom;
flyEl.id = Ext.id(dom);
return flyEl;
},
/*
* Queueing now stored outside of the element due to closure issues
*/
getQueue = function(id){
if(!queues[id]){
queues[id] = [];
}
return queues[id];
},
setQueue = function(id, value){
queues[id] = value;
};
//Notifies Element that fx methods are available
Ext.enableFx = TRUE;
/**