中间件编程

开发平台：

JavaScript

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

// Element animation options object
var opt = {
{@link Ext.Fx#duration duration}: 1,
{@link Ext.Fx#easing easing}: 'elasticIn',
{@link Ext.Fx#callback callback}: this.foo,
{@link Ext.Fx#scope scope}: this
};
// animation with some options set
el.setWidth(100, opt);
* </code></pre>
* <p>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:</p>
* <pre><code>
// using the "anim" property to get the Anim object
if(opt.anim.isAnimated()){
opt.anim.stop();
}
* </code></pre>
* <p>Also see the <tt>{@link #animate}</tt> method for another animation technique.</p>
* <p><b> Composite (Collections of) Elements</b></p>
* <p>For working with collections of Elements, see {@link Ext.CompositeElement}</p>
* @constructor Create a new Element directly.
* @param {String/HTMLElement} element
* @param {Boolean} forceNew (optional) 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).
*/
(function(){
var DOC = document;
Ext.Element = function(element, forceNew){
var dom = typeof element == "string" ?
DOC.getElementById(element) : element,
id;
if(!dom) return null;
id = dom.id;
if(!forceNew && id && Ext.Element.cache[id]){ // element object already exists
return Ext.Element.cache[id];
}
/**
* The DOM element
* @type HTMLElement
*/
this.dom = dom;
/**
* The DOM element ID
* @type String
*/
this.id = id || Ext.id(dom);
};
var D = Ext.lib.Dom,
DH = Ext.DomHelper,
E = Ext.lib.Event,
A = Ext.lib.Anim,
El = Ext.Element;
El.prototype = {
/**
* Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
* @param {Object} o The object with the attributes
* @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
* @return {Ext.Element} this
*/
set : function(o, useSet){
var el = this.dom,
attr,
val;
for(attr in o){
val = o[attr];
if (attr != "style" && !Ext.isFunction(val)) {
if (attr == "cls" ) {
el.className = val;
} else if (o.hasOwnProperty(attr)) {
if (useSet || !!el.setAttribute) el.setAttribute(attr, val);
else el[attr] = val;
}
}
}
if(o.style){
Ext.DomHelper.applyStyles(el, o.style);
}
return this;
},
// Mouse events
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
// Keyboard events
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
// HTML frame/object events
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
// Form events
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
// User Interface events
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
// DOM Mutation events
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* @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.
* @param {Object} o The options configuration passed to the {@link #addListener} call.
*/
/**
* The default unit to append to CSS values where a unit isn't provided (defaults to px).
* @type String
*/
defaultUnit : "px",
/**
* Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
* @param {String} selector The simple selector to test
* @return {Boolean} True if this element matches the selector, else false
*/
is : function(simpleSelector){
return Ext.DomQuery.is(this.dom, simpleSelector);
},
/**
* Tries to focus the element. Any exceptions are caught and ignored.
* @param {Number} defer (optional) Milliseconds to defer the focus
* @return {Ext.Element} this
*/
focus : function(defer, /* private */ dom) {
var me = this,
dom = dom || me.dom;
try{
if(Number(defer)){
me.focus.defer(defer, null, [null, dom]);
}else{
dom.focus();
}
}catch(e){}
return me;
},
/**
* Tries to blur the element. Any exceptions are caught and ignored.
* @return {Ext.Element} this
*/
blur : function() {
try{
this.dom.blur();
}catch(e){}
return this;
},
/**
* Returns the value of the "value" attribute
* @param {Boolean} asNumber true to parse the value as a number
* @return {String/Number}
*/
getValue : function(asNumber){
var val = this.dom.value;
return asNumber ? parseInt(val, 10) : val;
},
/**
* Appends an event handler to this element. The shorthand version {@link #on} is equivalent.
* @param {String} eventName The type of event to handle
* @param {Function} fn The handler function the event invokes. This function is passed
* the following parameters:<ul>
* <li><b>evt</b> : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>
* <li><b>el</b> : Element<div class="sub-desc">The {@link Ext.Element Element} which was the target of the event.
* Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
* <li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>
* </ul>
* @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
* <b>If omitted, defaults to this Element.</b>.
* @param {Object} options (optional) An object containing handler configuration properties.
* This may contain any of the following properties:<ul>
* <li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
* <b>If omitted, defaults to this Element.</b></div></li>
* <li><b>delegate</b> String: <div class="sub-desc">A simple selector to filter the target or look for a descendant of the target. See below for additional details.</div></li>
* <li><b>stopEvent</b> Boolean: <div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>
* <li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>
* <li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>
* <li><b>normalized</b> Boolean: <div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>
* <li><b>target</b> Ext.Element: <div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>
* <li><b>delay</b> Number: <div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
* <li><b>single</b> Boolean: <div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
* <li><b>buffer</b> Number: <div class="sub-desc">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 <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
* </ul><br>
* <p>
* <b>Combining Options</b><br>
* In the following examples, the shorthand form {@link #on} is used rather than the more verbose
* addListener. The two are equivalent. Using the options argument, it is possible to combine different
* types of listeners:<br>
* <br>
* 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.<div style="margin: 5px 20px 20px;">
* Code:<pre><code>
el.on('click', this.onClick, this, {
single: true,
delay: 100,
stopEvent : true,
forumId: 4
});</code></pre></p>
* <p>
* <b>Attaching multiple handlers in 1 call</b><br>
* The method also allows for a single argument to be passed which is a config object containing properties
* which specify multiple handlers.</p>
* <p>
* Code:<pre><code>
el.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
});</code></pre>
* <p>
* Or a shorthand syntax:<br>
* Code:<pre><code></p>
el.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
scope: this
});
* </code></pre></p>
* <p><b>delegate</b></p>
* <p>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:<pre><code>
// 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'
}
);
* </code></pre></p>
* @return {Ext.Element} this
*/
addListener : function(eventName, fn, scope, options){
Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
return this;
},
/**
* Removes an event handler from this element. The shorthand version {@link #un} is equivalent.
* <b>Note</b>: if a <i>scope</i> was explicitly specified when {@link #addListener adding} the
* listener, the same scope must be specified here.
* Example:
* <pre><code>
el.removeListener('click', this.handlerFn);
// or
el.un('click', this.handlerFn);
</code></pre>
* @param {String} eventName the type of event to remove
* @param {Function} fn the method the event invokes
* @param {Object} scope (optional) The scope (The <tt>this</tt> reference) of the handler function. Defaults
* to this Element.
* @return {Ext.Element} this
*/
removeListener : function(eventName, fn, scope){
Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this);
return this;
},
/**
* Removes all previous added listeners from this element
* @return {Ext.Element} this
*/
removeAllListeners : function(){
Ext.EventManager.removeAll(this.dom);
return this;
},
/**
* @private Test if size has a unit, otherwise appends the default
*/
addUnits : function(size){
if(size === "" || size == "auto" || size === undefined){
size = size || '';
} else if(!isNaN(size) || !unitPattern.test(size)){
size = size + (this.defaultUnit || 'px');
}
return size;
},
/**
* <p>Updates the <a href="http://developer.mozilla.org/en/DOM/element.innerHTML">innerHTML</a> of this Element
* from a specified URL. Note that this is subject to the <a href="http://en.wikipedia.org/wiki/Same_origin_policy">Same Origin Policy</a></p>
* <p>Updating innerHTML of an element will <b>not</b> execute embedded <tt><script></tt> elements. This is a browser restriction.</p>
* @param {Mixed} options. Either a sring containing the URL from which to load the HTML, or an {@link Ext.Ajax#request} options object specifying
* exactly how to request the HTML.
* @return {Ext.Element} this
*/
load : function(url, params, cb){
Ext.Ajax.request(Ext.apply({
params: params,
url: url.url || url,
callback: cb,
el: this.dom,
indicatorText: url.indicatorText || ''
}, Ext.isObject(url) ? url : {}));
return this;
},
/**
* Tests various css rules/browsers to determine if this element uses a border box
* @return {Boolean}
*/
isBorderBox : function(){
return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox;
},
/**
* Removes this element from the DOM and deletes it from the cache
*/
remove : function(){
var me = this,
dom = me.dom;
me.removeAllListeners();
delete El.cache[dom.id];
delete El.dataCache[dom.id]
Ext.removeNode(dom);
},
/**
* Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.
* @param {Function} overFn The function to call when the mouse enters the Element.
* @param {Function} outFn The function to call when the mouse leaves the Element.
* @param {Object} scope (optional) The scope (<tt>this</tt> reference) in which the functions are executed. Defaults to the Element's DOM element.
* @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the <tt>options</tt> parameter}.
* @return {Ext.Element} this
*/
hover : function(overFn, outFn, scope, options){
var me = this;
me.on('mouseenter', overFn, scope || me.dom, options);
me.on('mouseleave', outFn, scope || me.dom, options);
return me;
},
/**
* Returns true if this element is an ancestor of the passed element
* @param {HTMLElement/String} el The element to check
* @return {Boolean} True if this element is an ancestor of el, else false
*/
contains : function(el){
return !el ? false : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el);
},
/**
* Returns the value of a namespaced attribute from the element's underlying DOM node.
* @param {String} namespace The namespace in which to look for the attribute
* @param {String} name The attribute name
* @return {String} The attribute value
* @deprecated
*/
getAttributeNS : function(ns, name){
return this.getAttribute(name, ns);
},
/**
* Returns the value of an attribute from the element's underlying DOM node.
* @param {String} name The attribute name
* @param {String} namespace (optional) The namespace in which to look for the attribute
* @return {String} The attribute value
*/
getAttribute : Ext.isIE ? function(name, ns){
var d = this.dom,
type = typeof d[ns + ":" + name];
if(['undefined', 'unknown'].indexOf(type) == -1){
return d[ns + ":" + name];
}
return d[name];
} : function(name, ns){
var d = this.dom;
return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name];
},
/**
* Update the innerHTML of this element
* @param {String} html The new HTML
* @return {Ext.Element} this
*/
update : function(html) {
this.dom.innerHTML = html;
return this;
}
};
var ep = El.prototype;
El.addMethods = function(o){
Ext.apply(ep, o);
};
/**
* Appends an event handler (shorthand for {@link #addListener}).
* @param {String} eventName The type of event to handle
* @param {Function} fn The handler function the event invokes
* @param {Object} scope (optional) The scope (this element) of the handler function
* @param {Object} options (optional) An object containing standard {@link #addListener} options
* @member Ext.Element
* @method on
*/
ep.on = ep.addListener;
/**
* Removes an event handler from this element (see {@link #removeListener} for additional notes).
* @param {String} eventName the type of event to remove
* @param {Function} fn the method the event invokes
* @param {Object} scope (optional) The scope (The <tt>this</tt> reference) of the handler function. Defaults
* to this Element.
* @return {Ext.Element} this
* @member Ext.Element
* @method un
*/
ep.un = ep.removeListener;
/**
* true to automatically adjust width and height settings for box-model issues (default to true)
*/
ep.autoBoxAdjust = true;
// private
var unitPattern = /d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
docEl;
/**
* @private
*/
El.cache = {};
El.dataCache = {};
/**
* Retrieves Ext.Element objects.
* <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
* retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
* its ID, use {@link Ext.ComponentMgr#get}.</p>
* <p>Uses simple caching to consistently return the same object. Automatically fixes if an
* object was recreated with the same id via AJAX or DOM.</p>
* @param {Mixed} el The id of the node, a DOM Node or an existing Element.
* @return {Element} The Element object (or null if no matching element was found)
* @static
* @member Ext.Element
* @method get
*/
El.get = function(el){
var ex,
elm,
id;
if(!el){ return null; }
if (typeof el == "string") { // element id
if (!(elm = DOC.getElementById(el))) {
return null;
}
if (ex = El.cache[el]) {
ex.dom = elm;
} else {
ex = El.cache[el] = new El(elm);
}
return ex;
} else if (el.tagName) { // dom element
if(!(id = el.id)){
id = Ext.id(el);
}
if(ex = El.cache[id]){
ex.dom = el;
}else{
ex = El.cache[id] = new El(el);
}
return ex;
} else if (el instanceof El) {
if(el != docEl){
el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
// catch case where it hasn't been appended
El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
}
return el;
} else if(el.isComposite) {
return el;
} else if(Ext.isArray(el)) {
return El.select(el);
} else if(el == DOC) {
// create a bogus element object representing the document object
if(!docEl){
var f = function(){};
f.prototype = El.prototype;
docEl = new f();
docEl.dom = DOC;
}
return docEl;
}
return null;
};
// private method for getting and setting element data
El.data = function(el, key, value){
var c = El.dataCache[el.id];
if(!c){
c = El.dataCache[el.id] = {};
}
if(arguments.length == 2){
return c[key];
}else{
c[key] = value;
}
};
// private
// Garbage collection - uncache elements/purge listeners on orphaned elements
// so we don't hold a reference and cause the browser to retain them
function garbageCollect(){
if(!Ext.enableGarbageCollector){
clearInterval(El.collectorThread);
} else {
var eid,
el,
d;
for(eid in El.cache){
el = El.cache[eid];
d = el.dom;
// -------------------------------------------------------
// Determining what is garbage:
// -------------------------------------------------------
// !d
// dom node is null, definitely garbage
// -------------------------------------------------------
// !d.parentNode
// no parentNode == direct orphan, definitely garbage
// -------------------------------------------------------
// !d.offsetParent && !document.getElementById(eid)
// display none elements have no offsetParent so we will
// also try to look it up by it's id. However, check
// offsetParent first so we don't do unneeded lookups.
// This enables collection of elements that are not orphans
// directly, but somewhere up the line they have an orphan
// parent.
// -------------------------------------------------------
if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){
delete El.cache[eid];
if(d && Ext.enableListenerCollection){
Ext.EventManager.removeAll(d);
}
}
}
}
}
El.collectorThreadId = setInterval(garbageCollect, 30000);
var flyFn = function(){};
flyFn.prototype = El.prototype;
// dom is optional
El.Flyweight = function(dom){
this.dom = dom;
};
El.Flyweight.prototype = new flyFn();
El.Flyweight.prototype.isFlyweight = true;
El._flyweights = {};
/**
* <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
* the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p>
* <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
* application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}
* will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p>
* @param {String/HTMLElement} el The dom node or id
* @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
* (e.g. internally Ext uses "_global")
* @return {Element} The shared Element object (or null if no matching element was found)
* @member Ext.Element
* @method fly
*/
El.fly = function(el, named){
var ret = null;
named = named || '_global';
if (el = Ext.getDom(el)) {
(El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;
ret = El._flyweights[named];
}
return ret;
};
/**
* Retrieves Ext.Element objects.
* <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
* retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
* its ID, use {@link Ext.ComponentMgr#get}.</p>
* <p>Uses simple caching to consistently return the same object. Automatically fixes if an
* object was recreated with the same id via AJAX or DOM.</p>
* Shorthand of {@link Ext.Element#get}
* @param {Mixed} el The id of the node, a DOM Node or an existing Element.
* @return {Element} The Element object (or null if no matching element was found)
* @member Ext
* @method get
*/
Ext.get = El.get;
/**
* <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
* the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p>
* <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
* application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}
* will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p>
* @param {String/HTMLElement} el The dom node or id
* @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
* (e.g. internally Ext uses "_global")
* @return {Element} The shared Element object (or null if no matching element was found)
* @member Ext
* @method fly
*/
Ext.fly = El.fly;
// speedy lookup for elements never to box adjust
var noBoxAdjust = Ext.isStrict ? {
select:1
} : {
input:1, select:1, textarea:1
};
if(Ext.isIE || Ext.isGecko){
noBoxAdjust['button'] = 1;
}
Ext.EventManager.on(window, 'unload', function(){
delete El.cache;
delete El.dataCache;
delete El._flyweights;
});
})();
/**
* @class Ext.Element
*/
Ext.Element.addMethods({
/**
* Stops the specified event(s) from bubbling and optionally prevents the default action
* @param {String/Array} eventName an event / array of events to stop from bubbling
* @param {Boolean} preventDefault (optional) true to prevent the default action too
* @return {Ext.Element} this
*/
swallowEvent : function(eventName, preventDefault){
var me = this;
function fn(e){
e.stopPropagation();
if(preventDefault){
e.preventDefault();
}
}
if(Ext.isArray(eventName)){
Ext.each(eventName, function(e) {
me.on(e, fn);
});
return me;
}
me.on(eventName, fn);
return me;
},
/**
* Create an event handler on this element such that when the event fires and is handled by this element,
* it will be relayed to another object (i.e., fired again as if it originated from that object instead).
* @param {String} eventName The type of event to relay
* @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context
* for firing the relayed event
*/
relayEvent : function(eventName, observable){
this.on(eventName, function(e){
observable.fireEvent(eventName, e);
});
},
/**
* Removes worthless text nodes
* @param {Boolean} forceReclean (optional) By default the element
* keeps track if it has been cleaned already so
* you can call this over and over. However, if you update the element and
* need to force a reclean, you can pass true.
*/
clean : function(forceReclean){
var me = this,
dom = me.dom,
n = dom.firstChild,
ni = -1;
if(Ext.Element.data(dom, 'isCleaned') && forceReclean !== true){
return me;
}
while(n){
var nx = n.nextSibling;
if(n.nodeType == 3 && !/S/.test(n.nodeValue)){
dom.removeChild(n);
}else{
n.nodeIndex = ++ni;
}
n = nx;
}
Ext.Element.data(dom, 'isCleaned', true);
return me;
},
/**
* Direct access to the Updater {@link Ext.Updater#update} method. The method takes the same object
* parameter as {@link Ext.Updater#update}
* @return {Ext.Element} this
*/
load : function(){
var um = this.getUpdater();
um.update.apply(um, arguments);
return this;
},
/**
* Gets this element's {@link Ext.Updater Updater}
* @return {Ext.Updater} The Updater
*/
getUpdater : function(){
return this.updateManager || (this.updateManager = new Ext.Updater(this));
},
/**
* Update the innerHTML of this element, optionally searching for and processing scripts
* @param {String} html The new HTML
* @param {Boolean} loadScripts (optional) True to look for and process scripts (defaults to false)
* @param {Function} callback (optional) For async script loading you can be notified when the update completes
* @return {Ext.Element} this
*/
update : function(html, loadScripts, callback){
html = html || "";
if(loadScripts !== true){
this.dom.innerHTML = html;
if(Ext.isFunction(callback)){
callback();
}
return this;
}
var id = Ext.id(),
dom = this.dom;
html += '<span id="' + id + '"></span>';
Ext.lib.Event.onAvailable(id, function(){
var DOC = document,
hd = DOC.getElementsByTagName("head")[0],
re = /(?:<script([^>]*)?>)((n|r|.)*?)(?:</script>)/ig,
srcRe = /ssrc=(['"])(.*?)1/i,
typeRe = /stype=(['"])(.*?)1/i,
match,
attrs,
srcMatch,
typeMatch,
el,
s;
while((match = re.exec(html))){
attrs = match[1];
srcMatch = attrs ? attrs.match(srcRe) : false;
if(srcMatch && srcMatch[2]){
s = DOC.createElement("script");
s.src = srcMatch[2];
typeMatch = attrs.match(typeRe);
if(typeMatch && typeMatch[2]){
s.type = typeMatch[2];
}
hd.appendChild(s);
}else if(match[2] && match[2].length > 0){
if(window.execScript) {
window.execScript(match[2]);
} else {
window.eval(match[2]);
}
}
}
el = DOC.getElementById(id);
if(el){Ext.removeNode(el);}
if(Ext.isFunction(callback)){
callback();
}
});
dom.innerHTML = html.replace(/(?:<script.*?>)((n|r|.)*?)(?:</script>)/ig, "");
return this;
},
/**
* Creates a proxy element of this element
* @param {String/Object} config The class name of the proxy element or a DomHelper config object
* @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
* @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
* @return {Ext.Element} The new proxy element
*/
createProxy : function(config, renderTo, matchBox){
config = Ext.isObject(config) ? config : {tag : "div", cls: config};
var me = this,
proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) :
Ext.DomHelper.insertBefore(me.dom, config, true);
if(matchBox && me.setBox && me.getBox){ // check to make sure Element.position.js is loaded
proxy.setBox(me.getBox());
}
return proxy;
}
});
Ext.Element.prototype.getUpdateManager = Ext.Element.prototype.getUpdater;
// private
Ext.Element.uncache = function(el){
for(var i = 0, a = arguments, len = a.length; i < len; i++) {
if(a[i]){
delete Ext.Element.cache[a[i].id || a[i]];
}
}
};/**
* @class Ext.Element
*/
Ext.Element.addMethods({
/**
* Gets the x,y coordinates specified by the anchor position on the element.
* @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo}
* for details on supported anchor positions.
* @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead
* of page coordinates
* @param {Object} size (optional) An object containing the size to use for calculating anchor position
* {width: (target width), height: (target height)} (defaults to the element's current size)
* @return {Array} [x, y] An array containing the element's x and y coordinates
*/
getAnchorXY : function(anchor, local, s){
//Passing a different size is useful for pre-calculating anchors,
//especially for anchored animations that change the el size.
anchor = (anchor || "tl").toLowerCase();
s = s || {};
var me = this,
vp = me.dom == document.body || me.dom == document,
w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(),
h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(),
xy,
r = Math.round,
o = me.getXY(),
scroll = me.getScroll(),
extraX = vp ? scroll.left : !local ? o[0] : 0,
extraY = vp ? scroll.top : !local ? o[1] : 0,
hash = {
c : [r(w * 0.5), r(h * 0.5)],
t : [r(w * 0.5), 0],
l : [0, r(h * 0.5)],
r : [w, r(h * 0.5)],
b : [r(w * 0.5), h],
tl : [0, 0],
bl : [0, h],
br : [w, h],
tr : [w, 0]
};
xy = hash[anchor];
return [xy[0] + extraX, xy[1] + extraY];
},
/**
* Anchors an element to another element and realigns it when the window is resized.
* @param {Mixed} element The element to align to.
* @param {String} position The position to align to.
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
* @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
* is a number, it is used as the buffer delay (defaults to 50ms).
* @param {Function} callback The function to call after the animation finishes
* @return {Ext.Element} this
*/
anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
var me = this,
dom = me.dom;
function action(){
Ext.fly(dom).alignTo(el, alignment, offsets, animate);
Ext.callback(callback, Ext.fly(dom));
}
Ext.EventManager.onWindowResize(action, me);
if(!Ext.isEmpty(monitorScroll)){
Ext.EventManager.on(window, 'scroll', action, me,
{buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
}
action.call(me); // align immediately
return me;
},
/**
* Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
* supported position values.
* @param {Mixed} element The element to align to.
* @param {String} position The position to align to.
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @return {Array} [x, y]
*/
getAlignToXY : function(el, p, o){
el = Ext.get(el);
if(!el || !el.dom){
throw "Element.alignToXY with an element that doesn't exist";
}
o = o || [0,0];
p = (p == "?" ? "tl-bl?" : (!/-/.test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase();
var me = this,
d = me.dom,
a1,
a2,
x,
y,
//constrain the aligned el to viewport if necessary
w,
h,
r,
dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie
dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie
p1y,
p1x,
p2y,
p2x,
swapY,
swapX,
doc = document,
docElement = doc.documentElement,
docBody = doc.body,
scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,
scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,
c = false, //constrain to viewport
p1 = "",
p2 = "",
m = p.match(/^([a-z]+)-([a-z]+)(?)?$/);
if(!m){
throw "Element.alignTo with an invalid alignment " + p;
}
p1 = m[1];
p2 = m[2];
c = !!m[3];
//Subtract the aligned el's internal xy from the target's offset xy
//plus custom offset to get the aligned el's new offset xy
a1 = me.getAnchorXY(p1, true);
a2 = el.getAnchorXY(p2, false);
x = a2[0] - a1[0] + o[0];
y = a2[1] - a1[1] + o[1];
if(c){
w = me.getWidth();
h = me.getHeight();
r = el.getRegion();
//If we are at a viewport boundary and the aligned el is anchored on a target border that is
//perpendicular to the vp border, allow the aligned el to slide on that border,
//otherwise swap the aligned el to the opposite border of the target.
p1y = p1.charAt(0);
p1x = p1.charAt(p1.length-1);
p2y = p2.charAt(0);
p2x = p2.charAt(p2.length-1);
swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
if (x + w > dw + scrollX) {
x = swapX ? r.left-w : dw+scrollX-w;
}
if (x < scrollX) {
x = swapX ? r.right : scrollX;
}
if (y + h > dh + scrollY) {
y = swapY ? r.top-h : dh+scrollY-h;
}
if (y < scrollY){
y = swapY ? r.bottom : scrollY;
}
}
return [x,y];
},
/**
* Aligns this element with another element relative to the specified anchor points. If the other element is the
* document it aligns it to the viewport.
* The position parameter is optional, and can be specified in any one of the following formats:
* <ul>
* <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
* <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
* The element being aligned will position its top-left corner (tl) to that point. <i>This method has been
* deprecated in favor of the newer two anchor syntax below</i>.</li>
* <li><b>Two anchors</b>: If two values from the table below are passed separated by a dash, the first value is used as the
* element's anchor point, and the second value is used as the target's anchor point.</li>
* </ul>
* In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of
* the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
* the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than
* that specified in order to enforce the viewport constraints.
* Following are all of the supported anchor positions:
<pre>
Value Description
----- -----------------------------
tl The top left corner (default)
t The center of the top edge
tr The top right corner
l The center of the left edge
c In the center of the element
r The center of the right edge
bl The bottom left corner
b The center of the bottom edge
br The bottom right corner
</pre>
Example Usage:
<pre><code>
// align el to other-el using the default positioning ("tl-bl", non-constrained)
el.alignTo("other-el");
// align the top left corner of el with the top right corner of other-el (constrained to viewport)
el.alignTo("other-el", "tr?");
// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");
// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);
</code></pre>
* @param {Mixed} element The element to align to.
* @param {String} position The position to align to.
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
alignTo : function(element, position, offsets, animate){
var me = this;
return me.setXY(me.getAlignToXY(element, position, offsets),
me.preanim && !!animate ? me.preanim(arguments, 3) : false);
},
// private ==> used outside of core
adjustForConstraints : function(xy, parent, offsets){
return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
},
// private ==> used outside of core
getConstrainToXY : function(el, local, offsets, proposedXY){
var os = {top:0, left:0, bottom:0, right: 0};
return function(el, local, offsets, proposedXY){
el = Ext.get(el);
offsets = offsets ? Ext.applyIf(offsets, os) : os;
var vw, vh, vx = 0, vy = 0;
if(el.dom == document.body || el.dom == document){
vw =Ext.lib.Dom.getViewWidth();
vh = Ext.lib.Dom.getViewHeight();
}else{
vw = el.dom.clientWidth;
vh = el.dom.clientHeight;
if(!local){
var vxy = el.getXY();
vx = vxy[0];
vy = vxy[1];
}
}
var s = el.getScroll();
vx += offsets.left + s.left;
vy += offsets.top + s.top;
vw -= offsets.right;
vh -= offsets.bottom;
var vr = vx+vw;
var vb = vy+vh;
var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
var x = xy[0], y = xy[1];
var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
// only move it if it needs it
var moved = false;
// first validate right/bottom
if((x + w) > vr){
x = vr - w;
moved = true;
}
if((y + h) > vb){
y = vb - h;
moved = true;
}
// then make sure top/left isn't negative
if(x < vx){
x = vx;
moved = true;
}
if(y < vy){
y = vy;
moved = true;
}
return moved ? [x, y] : false;
};
}(),
// el = Ext.get(el);
// offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0});
// var me = this,
// doc = document,
// s = el.getScroll(),
// vxy = el.getXY(),
// vx = offsets.left + s.left,
// vy = offsets.top + s.top,
// vw = -offsets.right,
// vh = -offsets.bottom,
// vr,
// vb,
// xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]),
// x = xy[0],
// y = xy[1],
// w = me.dom.offsetWidth, h = me.dom.offsetHeight,
// moved = false; // only move it if it needs it
//
//
// if(el.dom == doc.body || el.dom == doc){
// vw += Ext.lib.Dom.getViewWidth();
// vh += Ext.lib.Dom.getViewHeight();
// }else{
// vw += el.dom.clientWidth;
// vh += el.dom.clientHeight;
// if(!local){
// vx += vxy[0];
// vy += vxy[1];
// }
// }
// // first validate right/bottom
// if(x + w > vx + vw){
// x = vx + vw - w;
// moved = true;
// }
// if(y + h > vy + vh){
// y = vy + vh - h;
// moved = true;
// }
// // then make sure top/left isn't negative
// if(x < vx){
// x = vx;
// moved = true;
// }
// if(y < vy){
// y = vy;
// moved = true;
// }
// return moved ? [x, y] : false;
// },
/**
* Calculates the x, y to center this element on the screen
* @return {Array} The x, y values [x, y]
*/
getCenterXY : function(){
return this.getAlignToXY(document, 'c-c');
},
/**
* Centers the Element in either the viewport, or another Element.
* @param {Mixed} centerIn (optional) The element in which to center the element.
*/
center : function(centerIn){
return this.alignTo(centerIn || document, 'c-c');
}
});
/**
* @class Ext.Element
*/
Ext.Element.addMethods(function(){
var PARENTNODE = 'parentNode',
NEXTSIBLING = 'nextSibling',
PREVIOUSSIBLING = 'previousSibling',
DQ = Ext.DomQuery,
GET = Ext.get;
return {
/**
* Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
* @param {String} selector The simple selector to test
* @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 50 || document.body)
* @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
* @return {HTMLElement} The matching DOM node (or null if no match was found)
*/
findParent : function(simpleSelector, maxDepth, returnEl){
var p = this.dom,
b = document.body,
depth = 0,
stopEl;
if(Ext.isGecko && Object.prototype.toString.call(p) == '[object XULElement]') {
return null;
}
maxDepth = maxDepth || 50;
if (isNaN(maxDepth)) {
stopEl = Ext.getDom(maxDepth);
maxDepth = Number.MAX_VALUE;
}
while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
if(DQ.is(p, simpleSelector)){
return returnEl ? GET(p) : p;
}
depth++;
p = p.parentNode;
}
return null;
},
/**
* Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
* @param {String} selector The simple selector to test
* @param {Number/Mixed} maxDepth (optional) The max depth to
search as a number or element (defaults to 10 || document.body)
* @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
* @return {HTMLElement} The matching DOM node (or null if no match was found)
*/
findParentNode : function(simpleSelector, maxDepth, returnEl){
var p = Ext.fly(this.dom.parentNode, '_internal');
return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
},
/**
* Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
* This is a shortcut for findParentNode() that always returns an Ext.Element.
* @param {String} selector The simple selector to test
* @param {Number/Mixed} maxDepth (optional) The max depth to
search as a number or element (defaults to 10 || document.body)
* @return {Ext.Element} The matching DOM node (or null if no match was found)
*/
up : function(simpleSelector, maxDepth){
return this.findParentNode(simpleSelector, maxDepth, true);
},
/**
* Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
* @param {String} selector The CSS selector
* @param {Boolean} unique (optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object)
* @return {CompositeElement/CompositeElementLite} The composite element
*/
select : function(selector, unique){
return Ext.Element.select(selector, unique, this.dom);
},
/**
* Selects child nodes based on the passed CSS selector (the selector should not contain an id).
* @param {String} selector The CSS selector
* @return {Array} An array of the matched nodes
*/
query : function(selector, unique){
return DQ.select(selector, this.dom);
},
/**
* Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
* @param {String} selector The CSS selector
* @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.Element (defaults to false)
* @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true)
*/
child : function(selector, returnDom){
var n = DQ.selectNode(selector, this.dom);
return returnDom ? n : GET(n);
},
/**
* Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
* @param {String} selector The CSS selector
* @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.Element (defaults to false)
* @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true)
*/
down : function(selector, returnDom){
var n = DQ.selectNode(" > " + selector, this.dom);
return returnDom ? n : GET(n);
},
/**
* Gets the parent node for this element, optionally chaining up trying to match a selector
* @param {String} selector (optional) Find a parent node that matches the passed simple selector
* @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
* @return {Ext.Element/HTMLElement} The parent node or null
*/
parent : function(selector, returnDom){
return this.matchNode(PARENTNODE, PARENTNODE, selector, returnDom);
},
/**
* Gets the next sibling, skipping text nodes
* @param {String} selector (optional) Find the next sibling that matches the passed simple selector
* @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
* @return {Ext.Element/HTMLElement} The next sibling or null
*/
next : function(selector, returnDom){
return this.matchNode(NEXTSIBLING, NEXTSIBLING, selector, returnDom);
},
/**
* Gets the previous sibling, skipping text nodes
* @param {String} selector (optional) Find the previous sibling that matches the passed simple selector
* @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
* @return {Ext.Element/HTMLElement} The previous sibling or null
*/
prev : function(selector, returnDom){
return this.matchNode(PREVIOUSSIBLING, PREVIOUSSIBLING, selector, returnDom);
},
/**
* Gets the first child, skipping text nodes
* @param {String} selector (optional) Find the next sibling that matches the passed simple selector
* @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
* @return {Ext.Element/HTMLElement} The first child or null
*/
first : function(selector, returnDom){
return this.matchNode(NEXTSIBLING, 'firstChild', selector, returnDom);
},
/**
* Gets the last child, skipping text nodes
* @param {String} selector (optional) Find the previous sibling that matches the passed simple selector
* @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.Element
* @return {Ext.Element/HTMLElement} The last child or null
*/
last : function(selector, returnDom){
return this.matchNode(PREVIOUSSIBLING, 'lastChild', selector, returnDom);
},
matchNode : function(dir, start, selector, returnDom){
var n = this.dom[start];
while(n){
if(n.nodeType == 1 && (!selector || DQ.is(n, selector))){
return !returnDom ? GET(n) : n;
}
n = n[dir];
}
return null;
}
}
}());/**
* @class Ext.Element
*/
Ext.Element.addMethods(
function() {
var GETDOM = Ext.getDom,
GET = Ext.get,
DH = Ext.DomHelper,
isEl = function(el){
return (el.nodeType || el.dom || typeof el == 'string');
};
return {
/**
* Appends the passed element(s) to this element
* @param {String/HTMLElement/Array/Element/CompositeElement} el
* @return {Ext.Element} this
*/
appendChild: function(el){
return GET(el).appendTo(this);
},
/**
* Appends this element to the passed element
* @param {Mixed} el The new parent element
* @return {Ext.Element} this
*/
appendTo: function(el){
GETDOM(el).appendChild(this.dom);