<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js">// @tag dom,core
|
<span id='Ext-dom-Element-method-constructor'><span id='Ext-dom-Element'>/**
|
</span></span> * @class Ext.dom.Element
|
* @alternateClassName Ext.Element
|
* @alternateClassName Ext.core.Element
|
* @extends Ext.dom.AbstractElement
|
*
|
* Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.
|
*
|
* All instances of this class inherit the methods of {@link Ext.fx.Anim} making visual effects easily available to all
|
* DOM elements.
|
*
|
* Note that the events documented in this class are not Ext events, they encapsulate browser events. Some older browsers
|
* may not support the full range of events. Which events are supported is beyond the control of Ext JS.
|
*
|
* Usage:
|
*
|
* // by id
|
* var el = Ext.get("my-div");
|
*
|
* // by DOM element reference
|
* var el = Ext.get(myDivElement);
|
*
|
* # Animations
|
*
|
* When an element is manipulated, by default there is no animation.
|
*
|
* var el = Ext.get("my-div");
|
*
|
* // no animation
|
* el.setWidth(100);
|
*
|
* Many of the functions for manipulating an element have an optional "animate" parameter. This parameter can be
|
* specified as boolean (true) for default animation effects.
|
*
|
* // default animation
|
* el.setWidth(100, true);
|
*
|
* To configure the effects, an object literal with animation options to use as the Element animation configuration
|
* object can also be specified. Note that the supported Element animation configuration options are a subset of the
|
* {@link Ext.fx.Anim} animation options specific to Fx effects. The supported Element animation configuration options
|
* are:
|
*
|
* Option Default Description
|
* --------- -------- ---------------------------------------------
|
* {@link Ext.fx.Anim#duration duration} 350 The duration of the animation in milliseconds
|
* {@link Ext.fx.Anim#easing easing} easeOut The easing method
|
* {@link Ext.fx.Anim#callback callback} none A function to execute when the anim completes
|
* {@link Ext.fx.Anim#scope scope} this The scope (this) of the callback function
|
*
|
* Usage:
|
*
|
* // Element animation options object
|
* var opt = {
|
* {@link Ext.fx.Anim#duration duration}: 1000,
|
* {@link Ext.fx.Anim#easing easing}: 'elasticIn',
|
* {@link Ext.fx.Anim#callback callback}: this.foo,
|
* {@link Ext.fx.Anim#scope scope}: this
|
* };
|
* // animation with some options set
|
* el.setWidth(100, opt);
|
*
|
* The Element animation object being used for the animation will be set on the options object as "anim", which allows
|
* you to stop or manipulate the animation. Here is an example:
|
*
|
* // using the "anim" property to get the Anim object
|
* if(opt.anim.isAnimated()){
|
* opt.anim.stop();
|
* }
|
*
|
* # Composite (Collections of) Elements
|
*
|
* For working with collections of Elements, see {@link Ext.CompositeElement}
|
*
|
* @constructor
|
* Creates new Element directly.
|
* @param {String/HTMLElement} element
|
* @param {Boolean} [forceNew] By default the constructor checks to see if there is already an instance of this
|
* element in the cache and if there is it returns the same instance. This will skip that check (useful for extending
|
* this class).
|
* @return {Object}
|
*/
|
Ext.define('Ext.dom.Element', function(Element) {
|
var HIDDEN = 'hidden',
|
DOC = document,
|
VISIBILITY = "visibility",
|
DISPLAY = "display",
|
NONE = "none",
|
XMASKED = Ext.baseCSSPrefix + "masked",
|
XMASKEDRELATIVE = Ext.baseCSSPrefix + "masked-relative",
|
EXTELMASKMSG = Ext.baseCSSPrefix + "mask-msg",
|
bodyRe = /^body/i,
|
visFly,
|
|
// speedy lookup for elements never to box adjust
|
noBoxAdjust = Ext.isStrict ? {
|
select: 1
|
}: {
|
input: 1,
|
select: 1,
|
textarea: 1
|
},
|
|
// Pseudo for use by cacheScrollValues
|
isScrolled = function(c) {
|
var r = [], ri = -1,
|
i, ci;
|
for (i = 0; ci = c[i]; i++) {
|
if (ci.scrollTop > 0 || ci.scrollLeft > 0) {
|
r[++ri] = ci;
|
}
|
}
|
return r;
|
};
|
|
return {
|
|
extend: 'Ext.dom.AbstractElement',
|
|
alternateClassName: ['Ext.Element', 'Ext.core.Element'],
|
|
requires: [
|
'Ext.dom.Query',
|
'Ext.dom.Element_anim',
|
'Ext.dom.Element_dd',
|
'Ext.dom.Element_fx',
|
'Ext.dom.Element_position',
|
'Ext.dom.Element_scroll',
|
'Ext.dom.Element_style'
|
],
|
|
tableTagRe: /^(?:tr|td|table|tbody)$/i,
|
|
mixins: [
|
'Ext.util.Positionable'
|
],
|
|
addUnits: function() {
|
return Element.addUnits.apply(Element, arguments);
|
},
|
|
<span id='Ext-dom-Element-method-focus'> /**
|
</span> * Tries to focus the element. Any exceptions are caught and ignored.
|
* @param {Number} [defer] Milliseconds to defer the focus
|
* @return {Ext.dom.Element} this
|
*/
|
focus: function(defer, /* private */ dom) {
|
var me = this;
|
|
dom = dom || me.dom;
|
try {
|
if (Number(defer)) {
|
Ext.defer(me.focus, defer, me, [null, dom]);
|
} else {
|
dom.focus();
|
}
|
} catch(e) {
|
}
|
return me;
|
},
|
|
<span id='Ext-dom-Element-method-blur'> /**
|
</span> * Tries to blur the element. Any exceptions are caught and ignored.
|
* @return {Ext.dom.Element} this
|
*/
|
blur: function() {
|
var me = this,
|
dom = me.dom;
|
// In IE, blurring the body can cause the browser window to hide.
|
// Blurring the body is redundant, so instead we just focus it
|
if (dom !== document.body) {
|
try {
|
dom.blur();
|
} catch(e) {
|
}
|
return me;
|
} else {
|
return me.focus(undefined, dom);
|
}
|
},
|
|
<span id='Ext-dom-Element-method-isBorderBox'> /**
|
</span> * Tests various css rules/browsers to determine if this element uses a border box
|
* @return {Boolean}
|
*/
|
isBorderBox: function() {
|
var box = Ext.isBorderBox;
|
|
// IE6/7 force input elements to content-box even if border-box is set explicitly
|
if (box && Ext.isIE7m) {
|
box = !((this.dom.tagName || "").toLowerCase() in noBoxAdjust);
|
}
|
return box;
|
},
|
|
<span id='Ext-dom-Element-method-hover'> /**
|
</span> * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.
|
* @param {Function} overFn The function to call when the mouse enters the Element.
|
* @param {Function} outFn The function to call when the mouse leaves the Element.
|
* @param {Object} [scope] The scope (`this` reference) in which the functions are executed. Defaults
|
* to the Element's DOM element.
|
* @param {Object} [options] Options for the listener. See {@link Ext.util.Observable#addListener the
|
* options parameter}.
|
* @return {Ext.dom.Element} this
|
*/
|
hover: function(overFn, outFn, scope, options) {
|
var me = this;
|
me.on('mouseenter', overFn, scope || me.dom, options);
|
me.on('mouseleave', outFn, scope || me.dom, options);
|
return me;
|
},
|
|
<span id='Ext-dom-Element-method-getAttributeNS'> /**
|
</span> * Returns the value of a namespaced attribute from the element's underlying DOM node.
|
* @param {String} namespace The namespace in which to look for the attribute
|
* @param {String} name The attribute name
|
* @return {String} The attribute value
|
*/
|
getAttributeNS: function(ns, name) {
|
return this.getAttribute(name, ns);
|
},
|
|
getAttribute: (Ext.isIE && !(Ext.isIE9p && DOC.documentMode >= 9)) ?
|
|
// Essentially all web browsers (Firefox, Internet Explorer, recent versions of Opera, Safari, Konqueror, and iCab,
|
// as a non-exhaustive list) return null when the specified attribute does not exist on the specified element.
|
// The DOM specification says that the correct return value in this case is actually the empty string, and some
|
// DOM implementations implement this behavior. The implementation of getAttribute in XUL (Gecko) actually follows
|
// the specification and returns an empty string. Consequently, you should use hasAttribute to check for an attribute's
|
// existence prior to calling getAttribute() if it is possible that the requested attribute does not exist on the specified element.
|
//
|
// https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute
|
// http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614
|
|
function(name, ns) {
|
var d = this.dom,
|
type;
|
if (ns) {
|
type = typeof d[ns + ":" + name];
|
if (type != 'undefined' && type != 'unknown') {
|
return d[ns + ":" + name] || null;
|
}
|
return null;
|
}
|
if (name === "for") {
|
name = "htmlFor";
|
}
|
return d[name] || null;
|
} : function(name, ns) {
|
var d = this.dom;
|
if (ns) {
|
return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name);
|
}
|
return d.getAttribute(name) || d[name] || null;
|
},
|
|
<span id='Ext-dom-Element-method-cacheScrollValues'> /**
|
</span> * When an element is moved around in the DOM, or is hidden using `display:none`, it loses layout, and therefore
|
* all scroll positions of all descendant elements are lost.
|
*
|
* This function caches them, and returns a function, which when run will restore the cached positions.
|
* In the following example, the Panel is moved from one Container to another which will cause it to lose all scroll positions:
|
*
|
* var restoreScroll = myPanel.el.cacheScrollValues();
|
* myOtherContainer.add(myPanel);
|
* restoreScroll();
|
*
|
* @return {Function} A function which will restore all descentant elements of this Element to their scroll
|
* positions recorded when this function was executed. Be aware that the returned function is a closure which has
|
* captured the scope of `cacheScrollValues`, so take care to derefence it as soon as not needed - if is it is a `var`
|
* it will drop out of scope, and the reference will be freed.
|
*/
|
cacheScrollValues: function() {
|
var me = this,
|
scrolledDescendants,
|
el, i,
|
scrollValues = [],
|
result = function() {
|
for (i = 0; i < scrolledDescendants.length; i++) {
|
el = scrolledDescendants[i];
|
el.scrollLeft = scrollValues[i][0];
|
el.scrollTop = scrollValues[i][1];
|
}
|
};
|
|
if (!Ext.DomQuery.pseudos.isScrolled) {
|
Ext.DomQuery.pseudos.isScrolled = isScrolled;
|
}
|
scrolledDescendants = me.query(':isScrolled');
|
for (i = 0; i < scrolledDescendants.length; i++) {
|
el = scrolledDescendants[i];
|
scrollValues[i] = [el.scrollLeft, el.scrollTop];
|
}
|
return result;
|
},
|
|
<span id='Ext-dom-Element-property-autoBoxAdjust'> /**
|
</span> * @property {Boolean} autoBoxAdjust
|
* True to automatically adjust width and height settings for box-model issues.
|
*/
|
autoBoxAdjust: true,
|
|
<span id='Ext-dom-Element-method-isVisible'> /**
|
</span> * Checks whether the element is currently visible using both visibility and display properties.
|
* @param {Boolean} [deep=false] True to walk the dom and see if parent elements are hidden.
|
* If false, the function only checks the visibility of the element itself and it may return
|
* `true` even though a parent is not visible.
|
* @return {Boolean} `true` if the element is currently visible, else `false`
|
*/
|
isVisible : function(deep) {
|
var me = this,
|
dom = me.dom,
|
stopNode = dom.ownerDocument.documentElement;
|
|
if (!visFly) {
|
visFly = new Element.Fly();
|
}
|
|
while (dom !== stopNode) {
|
// We're invisible if we hit a nonexistent parentNode or a document
|
// fragment or computed style visibility:hidden or display:none
|
if (!dom || dom.nodeType === 11 || (visFly.attach(dom)).isStyle(VISIBILITY, HIDDEN) || visFly.isStyle(DISPLAY, NONE)) {
|
return false;
|
}
|
// Quit now unless we are being asked to check parent nodes.
|
if (!deep) {
|
break;
|
}
|
dom = dom.parentNode;
|
}
|
return true;
|
},
|
|
<span id='Ext-dom-Element-method-isDisplayed'> /**
|
</span> * Returns true if display is not "none"
|
* @return {Boolean}
|
*/
|
isDisplayed : function() {
|
return !this.isStyle(DISPLAY, NONE);
|
},
|
|
<span id='Ext-dom-Element-method-enableDisplayMode'> /**
|
</span> * Convenience method for setVisibilityMode(Element.DISPLAY)
|
* @param {String} [display] What to set display to when visible
|
* @return {Ext.dom.Element} this
|
*/
|
enableDisplayMode : function(display) {
|
var me = this;
|
|
me.setVisibilityMode(Element.DISPLAY);
|
|
if (!Ext.isEmpty(display)) {
|
(me.$cache || me.getCache()).data.originalDisplay = display;
|
}
|
|
return me;
|
},
|
|
<span id='Ext-dom-Element-method-mask'> /**
|
</span> * 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] A message to display in the mask
|
* @param {String} [msgCls] A css class to apply to the msg element
|
* @return {Ext.dom.Element} The mask element
|
*/
|
mask : function(msg, msgCls /* private - passed by AbstractComponent.mask to avoid the need to interrogate the DOM to get the height*/, elHeight) {
|
var me = this,
|
dom = me.dom,
|
// In some cases, setExpression will exist but not be of a function type,
|
// so we check it explicitly here to stop IE throwing errors
|
setExpression = dom.style.setExpression,
|
data = (me.$cache || me.getCache()).data,
|
maskShimEl = data.maskShimEl,
|
maskEl = data.maskEl,
|
maskMsg = data.maskMsg,
|
widthExpression, heightExpression;
|
|
if (!(bodyRe.test(dom.tagName) && me.getStyle('position') == 'static')) {
|
me.addCls(XMASKEDRELATIVE);
|
}
|
|
// We always needs to recreate the mask since the DOM element may have been re-created
|
if (maskEl) {
|
maskEl.remove();
|
}
|
|
if (maskMsg) {
|
maskMsg.remove();
|
}
|
|
if (maskShimEl) {
|
maskShimEl.remove();
|
}
|
|
if (Ext.isIE6) {
|
maskShimEl = Ext.DomHelper.append(dom, {
|
tag: 'iframe',
|
cls : Ext.baseCSSPrefix + 'shim ' + Ext.baseCSSPrefix + 'mask-shim'
|
}, true);
|
data.maskShimEl = maskShimEl;
|
maskShimEl.setDisplayed(true);
|
}
|
|
Ext.DomHelper.append(dom, [{
|
cls : Ext.baseCSSPrefix + "mask",
|
style: 'top:0;left:0;'
|
}, {
|
cls : msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG,
|
cn : {
|
tag: 'div',
|
cls: Ext.baseCSSPrefix + 'mask-msg-inner',
|
cn: {
|
tag: 'div',
|
cls: Ext.baseCSSPrefix + 'mask-msg-text',
|
html: msg || ''
|
}
|
}
|
}]);
|
|
maskMsg = Ext.get(dom.lastChild);
|
maskEl = Ext.get(maskMsg.dom.previousSibling);
|
data.maskMsg = maskMsg;
|
data.maskEl = maskEl;
|
|
me.addCls(XMASKED);
|
maskEl.setDisplayed(true);
|
|
if (typeof msg == 'string') {
|
maskMsg.setDisplayed(true);
|
maskMsg.center(me);
|
} else {
|
maskMsg.setDisplayed(false);
|
}
|
// NOTE: CSS expressions are resource intensive and to be used only as a last resort
|
// These expressions are removed as soon as they are no longer necessary - in the unmask method.
|
// In normal use cases an element will be masked for a limited period of time.
|
// Fix for https://sencha.jira.com/browse/EXTJSIV-19.
|
// IE6 strict mode and IE6-9 quirks mode takes off left+right padding when calculating width!
|
if (!Ext.supports.IncludePaddingInWidthCalculation && setExpression) {
|
// In an occasional case setExpression will throw an exception
|
try {
|
maskEl.dom.style.setExpression('width', 'this.parentNode.clientWidth + "px"');
|
widthExpression = 'this.parentNode.clientWidth + "px"';
|
if (maskShimEl) {
|
maskShimEl.dom.style.setExpression('width', widthExpression);
|
}
|
maskEl.dom.style.setExpression('width', widthExpression);
|
} catch (e) {}
|
}
|
|
// Some versions and modes of IE subtract top+bottom padding when calculating height.
|
// Different versions from those which make the same error for width!
|
if (!Ext.supports.IncludePaddingInHeightCalculation && setExpression) {
|
// In an occasional case setExpression will throw an exception
|
try {
|
heightExpression = 'this.parentNode.' + (dom == DOC.body ? 'scrollHeight' : 'offsetHeight') + ' + "px"';
|
if (maskShimEl) {
|
maskShimEl.dom.style.setExpression('height', heightExpression);
|
}
|
maskEl.dom.style.setExpression('height', heightExpression);
|
} catch (e) {}
|
}
|
// ie will not expand full height automatically
|
else if (Ext.isIE9m && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto') {
|
if (maskShimEl) {
|
maskShimEl.setSize(undefined, elHeight || me.getHeight());
|
}
|
maskEl.setSize(undefined, elHeight || me.getHeight());
|
}
|
return maskEl;
|
},
|
|
<span id='Ext-dom-Element-method-unmask'> /**
|
</span> * Hides a previously applied mask.
|
*/
|
unmask : function() {
|
var me = this,
|
data = (me.$cache || me.getCache()).data,
|
maskEl = data.maskEl,
|
maskShimEl = data.maskShimEl,
|
maskMsg = data.maskMsg,
|
style;
|
|
if (maskEl) {
|
style = maskEl.dom.style;
|
// Remove resource-intensive CSS expressions as soon as they are not required.
|
if (style.clearExpression) {
|
style.clearExpression('width');
|
style.clearExpression('height');
|
}
|
|
if (maskEl) {
|
maskEl.remove();
|
delete data.maskEl;
|
}
|
|
if (maskMsg) {
|
maskMsg.remove();
|
delete data.maskMsg;
|
}
|
|
me.removeCls([XMASKED, XMASKEDRELATIVE]);
|
|
if (maskShimEl) {
|
style = maskShimEl.dom.style;
|
// Remove resource-intensive CSS expressions as soon as they are not required.
|
if (style.clearExpression) {
|
style.clearExpression('width');
|
style.clearExpression('height');
|
}
|
|
maskShimEl.remove();
|
delete data.maskShimEl;
|
}
|
}
|
},
|
|
<span id='Ext-dom-Element-method-isMasked'> /**
|
</span> * Returns true if this element is masked. Also re-centers any displayed message within the mask.
|
* @return {Boolean}
|
*/
|
isMasked : function() {
|
var me = this,
|
data = (me.$cache || me.getCache()).data,
|
maskEl = data.maskEl,
|
maskMsg = data.maskMsg,
|
hasMask = false;
|
|
if (maskEl && maskEl.isVisible()) {
|
if (maskMsg) {
|
maskMsg.center(me);
|
}
|
hasMask = true;
|
}
|
return hasMask;
|
},
|
|
<span id='Ext-dom-Element-method-createShim'> /**
|
</span> * Creates an iframe shim for this element to keep selects and other windowed objects from
|
* showing through.
|
* @return {Ext.dom.Element} The new shim element
|
*/
|
createShim : function() {
|
var el = DOC.createElement('iframe'),
|
shim;
|
|
el.frameBorder = '0';
|
el.className = Ext.baseCSSPrefix + 'shim';
|
el.src = Ext.SSL_SECURE_URL;
|
shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
|
shim.autoBoxAdjust = false;
|
return shim;
|
},
|
|
<span id='Ext-dom-Element-method-addKeyListener'> /**
|
</span> * Convenience method for constructing a KeyMap
|
* @param {String/Number/Number[]/Object} 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:
|
* @param {Number/Array} key.key
|
* @param {Boolean} key.shift
|
* @param {Boolean} key.ctrl
|
* @param {Boolean} key.alt
|
* @param {Function} fn The function to call
|
* @param {Object} [scope] The scope (`this` reference) in which the specified function is executed. Defaults to this Element.
|
* @return {Ext.util.KeyMap} The KeyMap created
|
*/
|
addKeyListener : function(key, fn, scope){
|
var config;
|
if(typeof key != 'object' || Ext.isArray(key)){
|
config = {
|
target: this,
|
key: key,
|
fn: fn,
|
scope: scope
|
};
|
}else{
|
config = {
|
target: this,
|
key : key.key,
|
shift : key.shift,
|
ctrl : key.ctrl,
|
alt : key.alt,
|
fn: fn,
|
scope: scope
|
};
|
}
|
return new Ext.util.KeyMap(config);
|
},
|
|
<span id='Ext-dom-Element-method-addKeyMap'> /**
|
</span> * Creates a KeyMap for this element
|
* @param {Object} config The KeyMap config. See {@link Ext.util.KeyMap} for more details
|
* @return {Ext.util.KeyMap} The KeyMap created
|
*/
|
addKeyMap : function(config) {
|
return new Ext.util.KeyMap(Ext.apply({
|
target: this
|
}, config));
|
},
|
|
// Mouse events
|
<span id='Ext-dom-Element-event-click'> /**
|
</span> * @event click
|
* Fires when a mouse click is detected within the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-contextmenu'> /**
|
</span> * @event contextmenu
|
* Fires when a right click is detected within the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-dblclick'> /**
|
</span> * @event dblclick
|
* Fires when a mouse double click is detected within the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-mousedown'> /**
|
</span> * @event mousedown
|
* Fires when a mousedown is detected within the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-mouseup'> /**
|
</span> * @event mouseup
|
* Fires when a mouseup is detected within the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-mouseover'> /**
|
</span> * @event mouseover
|
* Fires when a mouseover is detected within the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-mousemove'> /**
|
</span> * @event mousemove
|
* Fires when a mousemove is detected with the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-mouseout'> /**
|
</span> * @event mouseout
|
* Fires when a mouseout is detected with the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-mouseenter'> /**
|
</span> * @event mouseenter
|
* Fires when the mouse enters the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-mouseleave'> /**
|
</span> * @event mouseleave
|
* Fires when the mouse leaves the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
|
// Keyboard events
|
<span id='Ext-dom-Element-event-keypress'> /**
|
</span> * @event keypress
|
* Fires when a keypress is detected within the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-keydown'> /**
|
</span> * @event keydown
|
* Fires when a keydown is detected within the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-keyup'> /**
|
</span> * @event keyup
|
* Fires when a keyup is detected within the element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
|
// HTML frame/object events
|
<span id='Ext-dom-Element-event-load'> /**
|
</span> * @event load
|
* Fires when the user agent finishes loading all content within the element. Only supported by window, frames,
|
* objects and images.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-unload'> /**
|
</span> * @event unload
|
* Fires when the user agent removes all content from a window or frame. For elements, it fires when the target
|
* element or any of its content has been removed.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-abort'> /**
|
</span> * @event abort
|
* Fires when an object/image is stopped from loading before completely loaded.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-error'> /**
|
</span> * @event error
|
* Fires when an object/image/frame cannot be loaded properly.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-resize'> /**
|
</span> * @event resize
|
* Fires when a document view is resized.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-scroll'> /**
|
</span> * @event scroll
|
* Fires when a document view is scrolled.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
|
// Form events
|
<span id='Ext-dom-Element-event-select'> /**
|
</span> * @event select
|
* Fires when a user selects some text in a text field, including input and textarea.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-change'> /**
|
</span> * @event change
|
* Fires when a control loses the input focus and its value has been modified since gaining focus.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-submit'> /**
|
</span> * @event submit
|
* Fires when a form is submitted.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-reset'> /**
|
</span> * @event reset
|
* Fires when a form is reset.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-focus'> /**
|
</span> * @event focus
|
* Fires when an element receives focus either via the pointing device or by tab navigation.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-blur'> /**
|
</span> * @event blur
|
* Fires when an element loses focus either via the pointing device or by tabbing navigation.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
|
// User Interface events
|
<span id='Ext-dom-Element-event-DOMFocusIn'> /**
|
</span> * @event DOMFocusIn
|
* Where supported. Similar to HTML focus event, but can be applied to any focusable element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-DOMFocusOut'> /**
|
</span> * @event DOMFocusOut
|
* Where supported. Similar to HTML blur event, but can be applied to any focusable element.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-DOMActivate'> /**
|
</span> * @event DOMActivate
|
* Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
|
// DOM Mutation events
|
<span id='Ext-dom-Element-event-DOMSubtreeModified'> /**
|
</span> * @event DOMSubtreeModified
|
* Where supported. Fires when the subtree is modified.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-DOMNodeInserted'> /**
|
</span> * @event DOMNodeInserted
|
* Where supported. Fires when a node has been added as a child of another node.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-DOMNodeRemoved'> /**
|
</span> * @event DOMNodeRemoved
|
* Where supported. Fires when a descendant node of the element is removed.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-DOMNodeRemovedFromDocument'> /**
|
</span> * @event DOMNodeRemovedFromDocument
|
* Where supported. Fires when a node is being removed from a document.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-DOMNodeInsertedIntoDocument'> /**
|
</span> * @event DOMNodeInsertedIntoDocument
|
* Where supported. Fires when a node is being inserted into a document.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-DOMAttrModified'> /**
|
</span> * @event DOMAttrModified
|
* Where supported. Fires when an attribute has been modified.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
<span id='Ext-dom-Element-event-DOMCharacterDataModified'> /**
|
</span> * @event DOMCharacterDataModified
|
* Where supported. Fires when the character data has been modified.
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
* @param {HTMLElement} t The target of the event.
|
*/
|
|
<span id='Ext-dom-Element-method-on'> /**
|
</span> * Appends an event handler to this element.
|
*
|
* @param {String} eventName The name of event to handle.
|
*
|
* @param {Function} fn The handler function the event invokes. This function is passed the following parameters:
|
*
|
* - **evt** : EventObject
|
*
|
* The {@link Ext.EventObject EventObject} describing the event.
|
*
|
* - **el** : HtmlElement
|
*
|
* The DOM element which was the target of the event. Note that this may be filtered by using the delegate option.
|
*
|
* - **o** : Object
|
*
|
* The options object from the call that setup the listener.
|
*
|
* @param {Object} scope (optional) The scope (**this** reference) in which the handler function is executed. **If
|
* omitted, defaults to this Element.**
|
*
|
* @param {Object} options (optional) An object containing handler configuration properties. This may contain any of
|
* the following properties:
|
*
|
* - **scope** Object :
|
*
|
* The scope (**this** reference) in which the handler function is executed. **If omitted, defaults to this
|
* Element.**
|
*
|
* - **delegate** String:
|
*
|
* A simple selector to filter the target or look for a descendant of the target. See below for additional details.
|
*
|
* - **stopEvent** Boolean:
|
*
|
* True to stop the event. That is stop propagation, and prevent the default action.
|
*
|
* - **preventDefault** Boolean:
|
*
|
* True to prevent the default action
|
*
|
* - **stopPropagation** Boolean:
|
*
|
* True to prevent event propagation
|
*
|
* - **normalized** Boolean:
|
*
|
* False to pass a browser event to the handler function instead of an Ext.EventObject
|
*
|
* - **target** Ext.dom.Element:
|
*
|
* Only call the handler if the event was fired on the target Element, _not_ if the event was bubbled up from a
|
* child node.
|
*
|
* - **delay** Number:
|
*
|
* The number of milliseconds to delay the invocation of the handler after the event fires.
|
*
|
* - **single** Boolean:
|
*
|
* True to add a handler to handle just the next firing of the event, and then remove itself.
|
*
|
* - **buffer** Number:
|
*
|
* Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed by the specified number of
|
* milliseconds. If the event fires again within that time, the original handler is _not_ invoked, but the new
|
* handler is scheduled in its place.
|
*
|
* **Combining Options**
|
*
|
* Using the options argument, it is possible to combine different types of listeners:
|
*
|
* A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the options
|
* object. The options object is available as the third parameter in the handler function.
|
*
|
* Code:
|
*
|
* el.on('click', this.onClick, this, {
|
* single: true,
|
* delay: 100,
|
* stopEvent : true,
|
* forumId: 4
|
* });
|
*
|
* **Attaching multiple handlers in 1 call**
|
*
|
* The method also allows for a single argument to be passed which is a config object containing properties which
|
* specify multiple handlers.
|
*
|
* Code:
|
*
|
* el.on({
|
* 'click' : {
|
* fn: this.onClick,
|
* scope: this,
|
* delay: 100
|
* },
|
* 'mouseover' : {
|
* fn: this.onMouseOver,
|
* scope: this
|
* },
|
* 'mouseout' : {
|
* fn: this.onMouseOut,
|
* scope: this
|
* }
|
* });
|
*
|
* Or a shorthand syntax:
|
*
|
* Code:
|
*
|
* el.on({
|
* 'click' : this.onClick,
|
* 'mouseover' : this.onMouseOver,
|
* 'mouseout' : this.onMouseOut,
|
* scope: this
|
* });
|
*
|
* **delegate**
|
*
|
* This is a configuration option that you can pass along when registering a handler for an event to assist with
|
* event delegation. Event delegation is a technique that is used to reduce memory consumption and prevent exposure
|
* to memory-leaks. By registering an event for a container element as opposed to each element within a container.
|
* By setting this configuration option to a simple selector, the target element will be filtered to look for a
|
* descendant of the target. For example:
|
*
|
* // using this markup:
|
* <div id='elId'>
|
* <p id='p1'>paragraph one</p>
|
* <p id='p2' class='clickable'>paragraph two</p>
|
* <p id='p3'>paragraph three</p>
|
* </div>
|
*
|
* // utilize event delegation to registering just one handler on the container element:
|
* el = Ext.get('elId');
|
* el.on(
|
* 'click',
|
* function(e,t) {
|
* // handle click
|
* console.info(t.id); // 'p2'
|
* },
|
* this,
|
* {
|
* // filter the target element to be a descendant with the class 'clickable'
|
* delegate: '.clickable'
|
* }
|
* );
|
*
|
* @return {Ext.dom.Element} this
|
*/
|
on: function(eventName, fn, scope, options) {
|
Ext.EventManager.on(this, eventName, fn, scope || this, options);
|
return this;
|
},
|
|
<span id='Ext-dom-Element-method-un'> /**
|
</span> * Removes an event handler from this element.
|
*
|
* **Note**: if a *scope* was explicitly specified when {@link #on adding} the listener,
|
* the same scope must be specified here.
|
*
|
* Example:
|
*
|
* el.un('click', this.handlerFn);
|
* // or
|
* el.removeListener('click', this.handlerFn);
|
*
|
* @param {String} eventName The name of the event from which to remove the handler.
|
* @param {Function} fn The handler function to remove. **This must be a reference to the function passed into the
|
* {@link #on} call.**
|
* @param {Object} scope If a scope (**this** reference) was specified when the listener was added, then this must
|
* refer to the same object.
|
* @return {Ext.dom.Element} this
|
*/
|
un: function(eventName, fn, scope) {
|
Ext.EventManager.un(this, eventName, fn, scope || this);
|
return this;
|
},
|
|
<span id='Ext-dom-Element-method-removeAllListeners'> /**
|
</span> * Removes all previous added listeners from this element
|
* @return {Ext.dom.Element} this
|
*/
|
removeAllListeners: function() {
|
Ext.EventManager.removeAll(this);
|
return this;
|
},
|
|
<span id='Ext-dom-Element-method-purgeAllListeners'> /**
|
</span> * Recursively removes all previous added listeners from this element and its children
|
* @return {Ext.dom.Element} this
|
*/
|
purgeAllListeners: function() {
|
Ext.EventManager.purgeElement(this);
|
return this;
|
},
|
|
select: function(selector) {
|
return Element.select(selector, false, this.dom);
|
}
|
};
|
}, function() {
|
|
var DOC = document,
|
EC = Ext.cache,
|
Element = this,
|
AbstractElement = Ext.dom.AbstractElement,
|
focusRe = /^a|button|embed|iframe|input|object|select|textarea$/i,
|
nonSpaceRe = /\S/,
|
scriptTagRe = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig,
|
replaceScriptTagRe = /(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig,
|
srcRe = /\ssrc=([\'\"])(.*?)\1/i,
|
typeRe = /\stype=([\'\"])(.*?)\1/i,
|
useDocForId = !Ext.isIE8m,
|
internalFly;
|
|
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>';
|
//</!if>
|
|
// private
|
// Garbage collection - uncache elements/purge listeners on orphaned elements
|
// so we don't hold a reference and cause the browser to retain them
|
function garbageCollect() {
|
if (!Ext.enableGarbageCollector) {
|
clearInterval(Element.collectorThreadId);
|
} else {
|
var eid,
|
d,
|
o,
|
t;
|
|
for (eid in EC) {
|
if (!EC.hasOwnProperty(eid)) {
|
continue;
|
}
|
|
o = EC[eid];
|
|
// Skip document and window elements
|
if (o.skipGarbageCollection) {
|
continue;
|
}
|
|
d = o.dom;
|
|
//<debug>
|
// Should always have a DOM node
|
if (!d) {
|
Ext.Error.raise('Missing DOM node in element garbage collection: ' + eid);
|
}
|
|
// Check that document and window elements haven't got through
|
if (d && (d.getElementById || d.navigator)) {
|
Ext.Error.raise('Unexpected document or window element in element garbage collection');
|
}
|
//</debug>
|
|
// -------------------------------------------------------
|
// Determining what is garbage:
|
// -------------------------------------------------------
|
// !d.parentNode
|
// no parentNode == direct orphan, definitely garbage
|
// -------------------------------------------------------
|
// !d.offsetParent && !document.getElementById(eid)
|
// display none elements have no offsetParent so we will
|
// also try to look it up by it's id. However, check
|
// offsetParent first so we don't do unneeded lookups.
|
// This enables collection of elements that are not orphans
|
// directly, but somewhere up the line they have an orphan
|
// parent.
|
// -------------------------------------------------------
|
if (d && (!d.parentNode || (!d.offsetParent && !Ext.getElementById(eid)))) {
|
if (Ext.enableListenerCollection) {
|
Ext.EventManager.removeAll(d);
|
}
|
delete EC[eid];
|
}
|
}
|
// Cleanup IE Object leaks
|
if (Ext.isIE) {
|
t = {};
|
for (eid in EC) {
|
if (!EC.hasOwnProperty(eid)) {
|
continue;
|
}
|
t[eid] = EC[eid];
|
}
|
EC = Ext.cache = t;
|
}
|
}
|
}
|
|
Element.collectorThreadId = setInterval(garbageCollect, 30000);
|
|
//Stuff from Element-more.js
|
Element.addMethods({
|
|
<span id='Ext-dom-Element-method-monitorMouseLeave'> /**
|
</span> * Monitors this Element for the mouse leaving. Calls the function after the specified delay only if
|
* the mouse was not moved back into the Element within the delay. If the mouse *was* moved
|
* back in, the function is not called.
|
* @param {Number} delay The delay **in milliseconds** to wait for possible mouse re-entry before calling the handler function.
|
* @param {Function} handler The function to call if the mouse remains outside of this Element for the specified time.
|
* @param {Object} [scope] The scope (`this` reference) in which the handler function executes. Defaults to this Element.
|
* @return {Object} The listeners object which was added to this element so that monitoring can be stopped. Example usage:
|
*
|
* // Hide the menu if the mouse moves out for 250ms or more
|
* this.mouseLeaveMonitor = this.menuEl.monitorMouseLeave(250, this.hideMenu, this);
|
*
|
* ...
|
* // Remove mouseleave monitor on menu destroy
|
* this.menuEl.un(this.mouseLeaveMonitor);
|
*
|
*/
|
monitorMouseLeave: function(delay, handler, scope) {
|
var me = this,
|
timer,
|
listeners = {
|
mouseleave: function(e) {
|
timer = setTimeout(Ext.Function.bind(handler, scope||me, [e]), delay);
|
},
|
mouseenter: function() {
|
clearTimeout(timer);
|
},
|
freezeEvent: true
|
};
|
|
me.on(listeners);
|
return listeners;
|
},
|
|
<span id='Ext-dom-Element-method-swallowEvent'> /**
|
</span> * Stops the specified event(s) from bubbling and optionally prevents the default action
|
* @param {String/String[]} eventName an event / array of events to stop from bubbling
|
* @param {Boolean} [preventDefault] true to prevent the default action too
|
* @return {Ext.dom.Element} this
|
*/
|
swallowEvent : function(eventName, preventDefault) {
|
var me = this,
|
e, eLen,
|
fn = function(e) {
|
e.stopPropagation();
|
if (preventDefault) {
|
e.preventDefault();
|
}
|
};
|
|
if (Ext.isArray(eventName)) {
|
eLen = eventName.length;
|
|
for (e = 0; e < eLen; e++) {
|
me.on(eventName[e], fn);
|
}
|
|
return me;
|
}
|
me.on(eventName, fn);
|
return me;
|
},
|
|
<span id='Ext-dom-Element-method-relayEvent'> /**
|
</span> * Create an event handler on this element such that when the event fires and is handled by this element,
|
* it will be relayed to another object (i.e., fired again as if it originated from that object instead).
|
* @param {String} eventName The type of event to relay
|
* @param {Object} observable Any object that extends {@link Ext.util.Observable} that will provide the context
|
* for firing the relayed event
|
*/
|
relayEvent : function(eventName, observable) {
|
this.on(eventName, function(e) {
|
observable.fireEvent(eventName, e);
|
});
|
},
|
|
<span id='Ext-dom-Element-method-clean'> /**
|
</span> * Removes Empty, or whitespace filled text nodes. Combines adjacent text nodes.
|
* @param {Boolean} [forceReclean=false] By default the element keeps track if it has been cleaned already
|
* so you can call this over and over. However, if you update the element and need to force a reclean, you
|
* can pass true.
|
*/
|
clean : function(forceReclean) {
|
var me = this,
|
dom = me.dom,
|
data = (me.$cache || me.getCache()).data,
|
n = dom.firstChild,
|
ni = -1,
|
nx;
|
|
if (data.isCleaned && forceReclean !== true) {
|
return me;
|
}
|
|
while (n) {
|
nx = n.nextSibling;
|
if (n.nodeType == 3) {
|
// Remove empty/whitespace text nodes
|
if (!(nonSpaceRe.test(n.nodeValue))) {
|
dom.removeChild(n);
|
// Combine adjacent text nodes
|
} else if (nx && nx.nodeType == 3) {
|
n.appendData(Ext.String.trim(nx.data));
|
dom.removeChild(nx);
|
nx = n.nextSibling;
|
n.nodeIndex = ++ni;
|
}
|
} else {
|
// Recursively clean
|
internalFly.attach(n).clean();
|
n.nodeIndex = ++ni;
|
}
|
n = nx;
|
}
|
|
data.isCleaned = true;
|
return me;
|
},
|
|
<span id='Ext-dom-Element-method-load'> /**
|
</span> * Direct access to the Ext.ElementLoader {@link Ext.ElementLoader#method-load} method. The method takes the same object
|
* parameter as {@link Ext.ElementLoader#method-load}
|
* @return {Ext.dom.Element} this
|
*/
|
load : function(options) {
|
this.getLoader().load(options);
|
return this;
|
},
|
|
<span id='Ext-dom-Element-method-getLoader'> /**
|
</span> * Gets this element's {@link Ext.ElementLoader ElementLoader}
|
* @return {Ext.ElementLoader} The loader
|
*/
|
getLoader : function() {
|
var me = this,
|
data = (me.$cache || me.getCache()).data,
|
loader = data.loader;
|
|
if (!loader) {
|
data.loader = loader = new Ext.ElementLoader({
|
target: me
|
});
|
}
|
return loader;
|
},
|
|
<span id='Ext-dom-Element-method-syncContent'> /**
|
</span> * @private.
|
* Currently used for updating grid cells without modifying DOM structure
|
*
|
* Synchronizes content of this Element with the content of the passed element.
|
*
|
* Style and CSS class are copied from source into this Element, and contents are synched
|
* recursively. If a child node is a text node, the textual data is copied.
|
*/
|
syncContent: function(source) {
|
source = Ext.getDom(source);
|
var sourceNodes = source.childNodes,
|
sourceLen = sourceNodes.length,
|
dest = this.dom,
|
destNodes = dest.childNodes,
|
destLen = destNodes.length,
|
i, destNode, sourceNode,
|
nodeType, newAttrs, attLen, attName;
|
|
// Copy top node's attributes across. Use IE-specific method if possible.
|
// In IE10, there is a problem where the className will not get updated
|
// in the view, even though the className on the dom element is correct.
|
// See EXTJSIV-9462
|
if (Ext.isIE9m && dest.mergeAttributes) {
|
dest.mergeAttributes(source, true);
|
|
// EXTJSIV-6803. IE's mergeAttributes appears not to make the source's "src" value available until after the image is ready.
|
// So programatically copy any src attribute.
|
dest.src = source.src;
|
} else {
|
newAttrs = source.attributes;
|
attLen = newAttrs.length;
|
for (i = 0; i < attLen; i++) {
|
attName = newAttrs[i].name;
|
if (attName !== 'id') {
|
dest.setAttribute(attName, newAttrs[i].value);
|
}
|
}
|
}
|
|
// If the number of child nodes does not match, fall back to replacing innerHTML
|
if (sourceLen !== destLen) {
|
dest.innerHTML = source.innerHTML;
|
return;
|
}
|
|
// Loop through source nodes.
|
// If there are fewer, we must remove excess
|
for (i = 0; i < sourceLen; i++) {
|
sourceNode = sourceNodes[i];
|
destNode = destNodes[i];
|
nodeType = sourceNode.nodeType;
|
|
// If node structure is out of sync, just drop innerHTML in and return
|
if (nodeType !== destNode.nodeType || (nodeType === 1 && sourceNode.tagName !== destNode.tagName)) {
|
dest.innerHTML = source.innerHTML;
|
return;
|
}
|
|
// Update text node
|
if (nodeType === 3) {
|
destNode.data = sourceNode.data;
|
}
|
// Sync element content
|
else {
|
if (sourceNode.id && destNode.id !== sourceNode.id) {
|
destNode.id = sourceNode.id;
|
}
|
destNode.style.cssText = sourceNode.style.cssText;
|
destNode.className = sourceNode.className;
|
internalFly.attach(destNode).syncContent(sourceNode);
|
}
|
}
|
},
|
|
<span id='Ext-dom-Element-method-update'> /**
|
</span> * Updates the innerHTML of this element, optionally searching for and processing scripts.
|
* @param {String} html The new HTML
|
* @param {Boolean} [loadScripts] True to look for and process scripts (defaults to false)
|
* @param {Function} [callback] For async script loading you can be notified when the update completes
|
* @return {Ext.dom.Element} this
|
*/
|
update : function(html, loadScripts, callback) {
|
var me = this,
|
id,
|
dom,
|
interval;
|
|
if (!me.dom) {
|
return me;
|
}
|
html = html || '';
|
dom = me.dom;
|
|
if (loadScripts !== true) {
|
dom.innerHTML = html;
|
Ext.callback(callback, me);
|
return me;
|
}
|
|
id = Ext.id();
|
html += '<span id="' + id + '"></span>';
|
|
interval = setInterval(function() {
|
var hd,
|
match,
|
attrs,
|
srcMatch,
|
typeMatch,
|
el,
|
s;
|
if (!(el = DOC.getElementById(id))) {
|
return false;
|
}
|
clearInterval(interval);
|
Ext.removeNode(el);
|
hd = Ext.getHead().dom;
|
|
while ((match = scriptTagRe.exec(html))) {
|
attrs = match[1];
|
srcMatch = attrs ? attrs.match(srcRe) : false;
|
if (srcMatch && srcMatch[2]) {
|
s = DOC.createElement("script");
|
s.src = srcMatch[2];
|
typeMatch = attrs.match(typeRe);
|
if (typeMatch && typeMatch[2]) {
|
s.type = typeMatch[2];
|
}
|
hd.appendChild(s);
|
} else if (match[2] && match[2].length > 0) {
|
if (window.execScript) {
|
window.execScript(match[2]);
|
} else {
|
window.eval(match[2]);
|
}
|
}
|
}
|
Ext.callback(callback, me);
|
}, 20);
|
dom.innerHTML = html.replace(replaceScriptTagRe, '');
|
return me;
|
},
|
|
// inherit docs, overridden so we can add removeAnchor
|
removeAllListeners : function() {
|
this.removeAnchor();
|
Ext.EventManager.removeAll(this.dom);
|
return this;
|
},
|
|
<span id='Ext-dom-Element-method-createProxy'> /**
|
</span> * Creates a proxy element of this element
|
* @param {String/Object} config The class name of the proxy element or a DomHelper config object
|
* @param {String/HTMLElement} [renderTo] The element or element id to render the proxy to. Defaults to: document.body.
|
* @param {Boolean} [matchBox=false] True to align and size the proxy to this element now.
|
* @return {Ext.dom.Element} The new proxy element
|
*/
|
createProxy : function(config, renderTo, matchBox) {
|
config = (typeof config == 'object') ? config : {tag : "div", cls: config};
|
|
var me = this,
|
proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) :
|
Ext.DomHelper.insertBefore(me.dom, config, true);
|
|
proxy.setVisibilityMode(Element.DISPLAY);
|
proxy.hide();
|
if (matchBox && me.setBox && me.getBox) { // check to make sure Element.position.js is loaded
|
proxy.setBox(me.getBox());
|
}
|
return proxy;
|
},
|
|
<span id='Ext-dom-Element-method-needsTabIndex'> /**
|
</span> * Returns true if this element needs an explicit tabIndex to make it focusable. Input fields, text areas, buttons
|
* anchors elements **with an href** etc do not need a tabIndex, but structural elements do.
|
*/
|
needsTabIndex: function() {
|
if (this.dom) {
|
if ((this.dom.nodeName === 'a') && (!this.dom.href)) {
|
return true;
|
}
|
return !focusRe.test(this.dom.nodeName);
|
}
|
},
|
|
<span id='Ext-dom-Element-method-isFocusable'> /**
|
</span> * Checks whether this element can be focused.
|
* @return {Boolean} True if the element is focusable
|
*/
|
isFocusable: function (/* private - assume it's the focusEl of a Component */ asFocusEl) {
|
var dom = this.dom,
|
tabIndexAttr = dom.getAttributeNode('tabIndex'),
|
tabIndex,
|
nodeName = dom.nodeName,
|
canFocus = false;
|
|
// Certain browsers always report zero in the absence of the tabIndex attribute.
|
// Testing the specified property (Standards: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-862529273)
|
// Should filter out these cases.
|
// The exceptions are IE6 to IE8. In these browsers all elements will yield a tabIndex
|
// and therefore all elements will appear to be focusable.
|
// This adversely affects modal Floating components.
|
// These listen for the TAB key, and then test whether the event target === last focusable
|
// or first focusable element, and forcibly to a circular navigation.
|
// We cannot know the true first or last focusable element, so this problem still exists for IE6,7,8
|
// See Ext.util.Floating
|
if (tabIndexAttr && tabIndexAttr.specified) {
|
tabIndex = tabIndexAttr.value;
|
}
|
if (dom && !dom.disabled) {
|
// A tabIndex of -1 means it has to be programatically focused, so that needs FocusManager,
|
// and it has to be the focus holding el of a Component within the Component tree.
|
if (tabIndex == -1) { // note that the value is a string
|
canFocus = Ext.FocusManager && Ext.FocusManager.enabled && asFocusEl;
|
}
|
else {
|
// See if it's a naturally focusable element
|
if (focusRe.test(nodeName)) {
|
if ((nodeName !== 'a') || dom.href) {
|
canFocus = true;
|
}
|
}
|
// A non naturally focusable element is in the navigation flow if it has a positive numeric tab index.
|
else {
|
canFocus = tabIndex != null && tabIndex >= 0;
|
}
|
}
|
canFocus = canFocus && this.isVisible(true);
|
}
|
return canFocus;
|
}
|
});
|
|
if (Ext.isIE) {
|
Element.prototype.getById = function (id, asDom) {
|
var dom = this.dom,
|
cacheItem, el, ret;
|
|
if (dom) {
|
// for normal elements getElementById is the best solution, but if the el is
|
// not part of the document.body, we need to use all[]
|
el = (useDocForId && DOC.getElementById(id)) || dom.all[id];
|
if (el) {
|
if (asDom) {
|
ret = el;
|
} else {
|
// calling Element.get here is a real hit (2x slower) because it has to
|
// redetermine that we are giving it a dom el.
|
cacheItem = EC[id];
|
if (cacheItem && cacheItem.el) {
|
ret = Ext.updateCacheEntry(cacheItem, el).el;
|
} else {
|
ret = new Element(el);
|
}
|
}
|
return ret;
|
}
|
}
|
|
return asDom ? Ext.getDom(id) : Element.get(id);
|
};
|
}
|
|
Element.createAlias({
|
<span id='Ext-dom-Element-method-addListener'> /**
|
</span> * @method
|
* @inheritdoc Ext.dom.Element#on
|
* Shorthand for {@link #on}.
|
*/
|
addListener: 'on',
|
<span id='Ext-dom-Element-method-removeListener'> /**
|
</span> * @method
|
* @inheritdoc Ext.dom.Element#un
|
* Shorthand for {@link #un}.
|
*/
|
removeListener: 'un',
|
<span id='Ext-dom-Element-method-clearListeners'> /**
|
</span> * @method
|
* @inheritdoc Ext.dom.Element#removeAllListeners
|
* Alias for {@link #removeAllListeners}.
|
*/
|
clearListeners: 'removeAllListeners',
|
<span id='Ext-dom-Element-method-focusable'> /**
|
</span> * @method
|
* @inheritdoc Ext.dom.Element#isFocusable
|
* Alias for {@link #isFocusable}.
|
*/
|
focusable: 'isFocusable'
|
});
|
|
Element.Fly = AbstractElement.Fly = new Ext.Class({
|
extend: Element,
|
|
isFly: true,
|
|
constructor: function(dom) {
|
this.dom = dom;
|
// set an "el" property that references "this". This allows
|
// Ext.util.Positionable methods to operate on this.el.dom since it
|
// gets mixed into both Element and Component
|
this.el = this;
|
},
|
|
attach: AbstractElement.Fly.prototype.attach
|
});
|
|
internalFly = new Element.Fly();
|
|
if (Ext.isIE) {
|
Ext.getElementById = function (id) {
|
var el = DOC.getElementById(id),
|
detachedBodyEl;
|
|
if (!el && (detachedBodyEl = AbstractElement.detachedBodyEl)) {
|
el = detachedBodyEl.dom.all[id];
|
}
|
|
return el;
|
};
|
} else if (!DOC.querySelector) {
|
Ext.getDetachedBody = Ext.getBody;
|
|
Ext.getElementById = function (id) {
|
return DOC.getElementById(id);
|
};
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
