source: trunk/web/addons/job_monarch/lib/extjs-30/src/core/core/Element.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

  • new ExtJS 3.0
File size: 38.5 KB
Line 
1/*!
2 * Ext JS Library 3.0.0
3 * Copyright(c) 2006-2009 Ext JS, LLC
4 * licensing@extjs.com
5 * http://www.extjs.com/license
6 */
7/**
8 * @class Ext.Element
9 * <p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p>
10 * <p>All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.</p>
11 * <p>Note that the events documented in this class are not Ext events, they encapsulate browser events. To
12 * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older
13 * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.</p>
14 * Usage:<br>
15<pre><code>
16// by id
17var el = Ext.get("my-div");
18
19// by DOM element reference
20var el = Ext.get(myDivElement);
21</code></pre>
22 * <b>Animations</b><br />
23 * <p>When an element is manipulated, by default there is no animation.</p>
24 * <pre><code>
25var el = Ext.get("my-div");
26
27// no animation
28el.setWidth(100);
29 * </code></pre>
30 * <p>Many of the functions for manipulating an element have an optional "animate" parameter.  This
31 * parameter can be specified as boolean (<tt>true</tt>) for default animation effects.</p>
32 * <pre><code>
33// default animation
34el.setWidth(100, true);
35 * </code></pre>
36 *
37 * <p>To configure the effects, an object literal with animation options to use as the Element animation
38 * configuration object can also be specified. Note that the supported Element animation configuration
39 * options are a subset of the {@link Ext.Fx} animation options specific to Fx effects.  The supported
40 * Element animation configuration options are:</p>
41<pre>
42Option    Default   Description
43--------- --------  ---------------------------------------------
44{@link Ext.Fx#duration duration}  .35       The duration of the animation in seconds
45{@link Ext.Fx#easing easing}    easeOut   The easing method
46{@link Ext.Fx#callback callback}  none      A function to execute when the anim completes
47{@link Ext.Fx#scope scope}     this      The scope (this) of the callback function
48</pre>
49 *
50 * <pre><code>
51// Element animation options object
52var opt = {
53    {@link Ext.Fx#duration duration}: 1,
54    {@link Ext.Fx#easing easing}: 'elasticIn',
55    {@link Ext.Fx#callback callback}: this.foo,
56    {@link Ext.Fx#scope scope}: this
57};
58// animation with some options set
59el.setWidth(100, opt);
60 * </code></pre>
61 * <p>The Element animation object being used for the animation will be set on the options
62 * object as "anim", which allows you to stop or manipulate the animation. Here is an example:</p>
63 * <pre><code>
64// using the "anim" property to get the Anim object
65if(opt.anim.isAnimated()){
66    opt.anim.stop();
67}
68 * </code></pre>
69 * <p>Also see the <tt>{@link #animate}</tt> method for another animation technique.</p>
70 * <p><b> Composite (Collections of) Elements</b></p>
71 * <p>For working with collections of Elements, see {@link Ext.CompositeElement}</p>
72 * @constructor Create a new Element directly.
73 * @param {String/HTMLElement} element
74 * @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).
75 */
76(function(){
77var DOC = document;
78
79Ext.Element = function(element, forceNew){
80    var dom = typeof element == "string" ?
81              DOC.getElementById(element) : element,
82        id;
83
84    if(!dom) return null;
85
86    id = dom.id;
87
88    if(!forceNew && id && Ext.Element.cache[id]){ // element object already exists
89        return Ext.Element.cache[id];
90    }
91
92    /**
93     * The DOM element
94     * @type HTMLElement
95     */
96    this.dom = dom;
97
98    /**
99     * The DOM element ID
100     * @type String
101     */
102    this.id = id || Ext.id(dom);
103};
104
105var D = Ext.lib.Dom,
106    DH = Ext.DomHelper,
107    E = Ext.lib.Event,
108    A = Ext.lib.Anim,
109    El = Ext.Element;
110
111El.prototype = {
112    /**
113     * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
114     * @param {Object} o The object with the attributes
115     * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
116     * @return {Ext.Element} this
117     */
118    set : function(o, useSet){
119        var el = this.dom,
120            attr,
121            val;       
122       
123        for(attr in o){
124            val = o[attr];
125            if (attr != "style" && !Ext.isFunction(val)) {
126                if (attr == "cls" ) {
127                    el.className = val;
128                } else if (o.hasOwnProperty(attr)) {
129                    if (useSet || !!el.setAttribute) el.setAttribute(attr, val);
130                    else el[attr] = val;
131                }
132            }
133        }
134        if(o.style){
135            Ext.DomHelper.applyStyles(el, o.style);
136        }
137        return this;
138    },
139   
140//  Mouse events
141    /**
142     * @event click
143     * Fires when a mouse click is detected within the element.
144     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
145     * @param {HtmlElement} t The target of the event.
146     * @param {Object} o The options configuration passed to the {@link #addListener} call.
147     */
148    /**
149     * @event dblclick
150     * Fires when a mouse double click is detected within the element.
151     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
152     * @param {HtmlElement} t The target of the event.
153     * @param {Object} o The options configuration passed to the {@link #addListener} call.
154     */
155    /**
156     * @event mousedown
157     * Fires when a mousedown is detected within the element.
158     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
159     * @param {HtmlElement} t The target of the event.
160     * @param {Object} o The options configuration passed to the {@link #addListener} call.
161     */
162    /**
163     * @event mouseup
164     * Fires when a mouseup is detected within the element.
165     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
166     * @param {HtmlElement} t The target of the event.
167     * @param {Object} o The options configuration passed to the {@link #addListener} call.
168     */
169    /**
170     * @event mouseover
171     * Fires when a mouseover is detected within the element.
172     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
173     * @param {HtmlElement} t The target of the event.
174     * @param {Object} o The options configuration passed to the {@link #addListener} call.
175     */
176    /**
177     * @event mousemove
178     * Fires when a mousemove is detected with the element.
179     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
180     * @param {HtmlElement} t The target of the event.
181     * @param {Object} o The options configuration passed to the {@link #addListener} call.
182     */
183    /**
184     * @event mouseout
185     * Fires when a mouseout is detected with the element.
186     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
187     * @param {HtmlElement} t The target of the event.
188     * @param {Object} o The options configuration passed to the {@link #addListener} call.
189     */
190    /**
191     * @event mouseenter
192     * Fires when the mouse enters the element.
193     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
194     * @param {HtmlElement} t The target of the event.
195     * @param {Object} o The options configuration passed to the {@link #addListener} call.
196     */
197    /**
198     * @event mouseleave
199     * Fires when the mouse leaves the element.
200     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
201     * @param {HtmlElement} t The target of the event.
202     * @param {Object} o The options configuration passed to the {@link #addListener} call.
203     */
204   
205//  Keyboard events
206    /**
207     * @event keypress
208     * Fires when a keypress is detected within the element.
209     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
210     * @param {HtmlElement} t The target of the event.
211     * @param {Object} o The options configuration passed to the {@link #addListener} call.
212     */
213    /**
214     * @event keydown
215     * Fires when a keydown is detected within the element.
216     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
217     * @param {HtmlElement} t The target of the event.
218     * @param {Object} o The options configuration passed to the {@link #addListener} call.
219     */
220    /**
221     * @event keyup
222     * Fires when a keyup is detected within the element.
223     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
224     * @param {HtmlElement} t The target of the event.
225     * @param {Object} o The options configuration passed to the {@link #addListener} call.
226     */
227
228
229//  HTML frame/object events
230    /**
231     * @event load
232     * Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images.
233     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
234     * @param {HtmlElement} t The target of the event.
235     * @param {Object} o The options configuration passed to the {@link #addListener} call.
236     */
237    /**
238     * @event unload
239     * 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.
240     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
241     * @param {HtmlElement} t The target of the event.
242     * @param {Object} o The options configuration passed to the {@link #addListener} call.
243     */
244    /**
245     * @event abort
246     * Fires when an object/image is stopped from loading before completely loaded.
247     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
248     * @param {HtmlElement} t The target of the event.
249     * @param {Object} o The options configuration passed to the {@link #addListener} call.
250     */
251    /**
252     * @event error
253     * Fires when an object/image/frame cannot be loaded properly.
254     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
255     * @param {HtmlElement} t The target of the event.
256     * @param {Object} o The options configuration passed to the {@link #addListener} call.
257     */
258    /**
259     * @event resize
260     * Fires when a document view is resized.
261     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
262     * @param {HtmlElement} t The target of the event.
263     * @param {Object} o The options configuration passed to the {@link #addListener} call.
264     */
265    /**
266     * @event scroll
267     * Fires when a document view is scrolled.
268     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
269     * @param {HtmlElement} t The target of the event.
270     * @param {Object} o The options configuration passed to the {@link #addListener} call.
271     */
272
273//  Form events
274    /**
275     * @event select
276     * Fires when a user selects some text in a text field, including input and textarea.
277     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
278     * @param {HtmlElement} t The target of the event.
279     * @param {Object} o The options configuration passed to the {@link #addListener} call.
280     */
281    /**
282     * @event change
283     * Fires when a control loses the input focus and its value has been modified since gaining focus.
284     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
285     * @param {HtmlElement} t The target of the event.
286     * @param {Object} o The options configuration passed to the {@link #addListener} call.
287     */
288    /**
289     * @event submit
290     * Fires when a form is submitted.
291     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
292     * @param {HtmlElement} t The target of the event.
293     * @param {Object} o The options configuration passed to the {@link #addListener} call.
294     */
295    /**
296     * @event reset
297     * Fires when a form is reset.
298     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
299     * @param {HtmlElement} t The target of the event.
300     * @param {Object} o The options configuration passed to the {@link #addListener} call.
301     */
302    /**
303     * @event focus
304     * Fires when an element receives focus either via the pointing device or by tab navigation.
305     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
306     * @param {HtmlElement} t The target of the event.
307     * @param {Object} o The options configuration passed to the {@link #addListener} call.
308     */
309    /**
310     * @event blur
311     * Fires when an element loses focus either via the pointing device or by tabbing navigation.
312     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
313     * @param {HtmlElement} t The target of the event.
314     * @param {Object} o The options configuration passed to the {@link #addListener} call.
315     */
316
317//  User Interface events
318    /**
319     * @event DOMFocusIn
320     * Where supported. Similar to HTML focus event, but can be applied to any focusable element.
321     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
322     * @param {HtmlElement} t The target of the event.
323     * @param {Object} o The options configuration passed to the {@link #addListener} call.
324     */
325    /**
326     * @event DOMFocusOut
327     * Where supported. Similar to HTML blur event, but can be applied to any focusable element.
328     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
329     * @param {HtmlElement} t The target of the event.
330     * @param {Object} o The options configuration passed to the {@link #addListener} call.
331     */
332    /**
333     * @event DOMActivate
334     * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.
335     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
336     * @param {HtmlElement} t The target of the event.
337     * @param {Object} o The options configuration passed to the {@link #addListener} call.
338     */
339
340//  DOM Mutation events
341    /**
342     * @event DOMSubtreeModified
343     * Where supported. Fires when the subtree is modified.
344     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
345     * @param {HtmlElement} t The target of the event.
346     * @param {Object} o The options configuration passed to the {@link #addListener} call.
347     */
348    /**
349     * @event DOMNodeInserted
350     * Where supported. Fires when a node has been added as a child of another node.
351     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
352     * @param {HtmlElement} t The target of the event.
353     * @param {Object} o The options configuration passed to the {@link #addListener} call.
354     */
355    /**
356     * @event DOMNodeRemoved
357     * Where supported. Fires when a descendant node of the element is removed.
358     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
359     * @param {HtmlElement} t The target of the event.
360     * @param {Object} o The options configuration passed to the {@link #addListener} call.
361     */
362    /**
363     * @event DOMNodeRemovedFromDocument
364     * Where supported. Fires when a node is being removed from a document.
365     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
366     * @param {HtmlElement} t The target of the event.
367     * @param {Object} o The options configuration passed to the {@link #addListener} call.
368     */
369    /**
370     * @event DOMNodeInsertedIntoDocument
371     * Where supported. Fires when a node is being inserted into a document.
372     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
373     * @param {HtmlElement} t The target of the event.
374     * @param {Object} o The options configuration passed to the {@link #addListener} call.
375     */
376    /**
377     * @event DOMAttrModified
378     * Where supported. Fires when an attribute has been modified.
379     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
380     * @param {HtmlElement} t The target of the event.
381     * @param {Object} o The options configuration passed to the {@link #addListener} call.
382     */
383    /**
384     * @event DOMCharacterDataModified
385     * Where supported. Fires when the character data has been modified.
386     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
387     * @param {HtmlElement} t The target of the event.
388     * @param {Object} o The options configuration passed to the {@link #addListener} call.
389     */
390
391    /**
392     * The default unit to append to CSS values where a unit isn't provided (defaults to px).
393     * @type String
394     */
395    defaultUnit : "px",
396
397    /**
398     * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
399     * @param {String} selector The simple selector to test
400     * @return {Boolean} True if this element matches the selector, else false
401     */
402    is : function(simpleSelector){
403        return Ext.DomQuery.is(this.dom, simpleSelector);
404    },
405
406    /**
407     * Tries to focus the element. Any exceptions are caught and ignored.
408     * @param {Number} defer (optional) Milliseconds to defer the focus
409     * @return {Ext.Element} this
410     */
411    focus : function(defer, /* private */ dom) {
412        var me = this,
413            dom = dom || me.dom;
414        try{
415            if(Number(defer)){
416                me.focus.defer(defer, null, [null, dom]);
417            }else{
418                dom.focus();
419            }
420        }catch(e){}
421        return me;
422    },
423
424    /**
425     * Tries to blur the element. Any exceptions are caught and ignored.
426     * @return {Ext.Element} this
427     */
428    blur : function() {
429        try{
430            this.dom.blur();
431        }catch(e){}
432        return this;
433    },
434
435    /**
436     * Returns the value of the "value" attribute
437     * @param {Boolean} asNumber true to parse the value as a number
438     * @return {String/Number}
439     */
440    getValue : function(asNumber){
441        var val = this.dom.value;
442        return asNumber ? parseInt(val, 10) : val;
443    },
444
445    /**
446     * Appends an event handler to this element.  The shorthand version {@link #on} is equivalent.
447     * @param {String} eventName The type of event to handle
448     * @param {Function} fn The handler function the event invokes. This function is passed
449     * the following parameters:<ul>
450     * <li><b>evt</b> : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>
451     * <li><b>el</b> : Element<div class="sub-desc">The {@link Ext.Element Element} which was the target of the event.
452     * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
453     * <li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>
454     * </ul>
455     * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
456     * <b>If omitted, defaults to this Element.</b>.
457     * @param {Object} options (optional) An object containing handler configuration properties.
458     * This may contain any of the following properties:<ul>
459     * <li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
460     * <b>If omitted, defaults to this Element.</b></div></li>
461     * <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>
462     * <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>
463     * <li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>
464     * <li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>
465     * <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>
466     * <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>
467     * <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>
468     * <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>
469     * <li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
470     * by the specified number of milliseconds. If the event fires again within that time, the original
471     * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
472     * </ul><br>
473     * <p>
474     * <b>Combining Options</b><br>
475     * In the following examples, the shorthand form {@link #on} is used rather than the more verbose
476     * addListener.  The two are equivalent.  Using the options argument, it is possible to combine different
477     * types of listeners:<br>
478     * <br>
479     * A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
480     * options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;">
481     * Code:<pre><code>
482el.on('click', this.onClick, this, {
483    single: true,
484    delay: 100,
485    stopEvent : true,
486    forumId: 4
487});</code></pre></p>
488     * <p>
489     * <b>Attaching multiple handlers in 1 call</b><br>
490     * The method also allows for a single argument to be passed which is a config object containing properties
491     * which specify multiple handlers.</p>
492     * <p>
493     * Code:<pre><code>
494el.on({
495    'click' : {
496        fn: this.onClick,
497        scope: this,
498        delay: 100
499    },
500    'mouseover' : {
501        fn: this.onMouseOver,
502        scope: this
503    },
504    'mouseout' : {
505        fn: this.onMouseOut,
506        scope: this
507    }
508});</code></pre>
509     * <p>
510     * Or a shorthand syntax:<br>
511     * Code:<pre><code></p>
512el.on({
513    'click' : this.onClick,
514    'mouseover' : this.onMouseOver,
515    'mouseout' : this.onMouseOut,
516    scope: this
517});
518     * </code></pre></p>
519     * <p><b>delegate</b></p>
520     * <p>This is a configuration option that you can pass along when registering a handler for
521     * an event to assist with event delegation. Event delegation is a technique that is used to
522     * reduce memory consumption and prevent exposure to memory-leaks. By registering an event
523     * for a container element as opposed to each element within a container. By setting this
524     * configuration option to a simple selector, the target element will be filtered to look for
525     * a descendant of the target.
526     * For example:<pre><code>
527// using this markup:
528&lt;div id='elId'>
529    &lt;p id='p1'>paragraph one&lt;/p>
530    &lt;p id='p2' class='clickable'>paragraph two&lt;/p>
531    &lt;p id='p3'>paragraph three&lt;/p>
532&lt;/div>
533// utilize event delegation to registering just one handler on the container element:
534el = Ext.get('elId');
535el.on(
536    'click',
537    function(e,t) {
538        // handle click
539        console.info(t.id); // 'p2'
540    },
541    this,
542    {
543        // filter the target element to be a descendant with the class 'clickable'
544        delegate: '.clickable'
545    }
546);
547     * </code></pre></p>
548     * @return {Ext.Element} this
549     */
550    addListener : function(eventName, fn, scope, options){
551        Ext.EventManager.on(this.dom,  eventName, fn, scope || this, options);
552        return this;
553    },
554
555    /**
556     * Removes an event handler from this element.  The shorthand version {@link #un} is equivalent.
557     * <b>Note</b>: if a <i>scope</i> was explicitly specified when {@link #addListener adding} the
558     * listener, the same scope must be specified here.
559     * Example:
560     * <pre><code>
561el.removeListener('click', this.handlerFn);
562// or
563el.un('click', this.handlerFn);
564</code></pre>
565     * @param {String} eventName the type of event to remove
566     * @param {Function} fn the method the event invokes
567     * @param {Object} scope (optional) The scope (The <tt>this</tt> reference) of the handler function. Defaults
568     * to this Element.
569     * @return {Ext.Element} this
570     */
571    removeListener : function(eventName, fn, scope){
572        Ext.EventManager.removeListener(this.dom,  eventName, fn, scope || this);
573        return this;
574    },
575
576    /**
577     * Removes all previous added listeners from this element
578     * @return {Ext.Element} this
579     */
580    removeAllListeners : function(){
581        Ext.EventManager.removeAll(this.dom);
582        return this;
583    },
584
585    /**
586     * @private Test if size has a unit, otherwise appends the default
587     */
588    addUnits : function(size){
589        if(size === "" || size == "auto" || size === undefined){
590            size = size || '';
591        } else if(!isNaN(size) || !unitPattern.test(size)){
592            size = size + (this.defaultUnit || 'px');
593        }
594        return size;
595    },
596
597    /**
598     * <p>Updates the <a href="http://developer.mozilla.org/en/DOM/element.innerHTML">innerHTML</a> of this Element
599     * 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>
600     * <p>Updating innerHTML of an element will <b>not</b> execute embedded <tt>&lt;script></tt> elements. This is a browser restriction.</p>
601     * @param {Mixed} options. Either a sring containing the URL from which to load the HTML, or an {@link Ext.Ajax#request} options object specifying
602     * exactly how to request the HTML.
603     * @return {Ext.Element} this
604     */
605    load : function(url, params, cb){
606        Ext.Ajax.request(Ext.apply({
607            params: params,
608            url: url.url || url,
609            callback: cb,
610            el: this.dom,
611            indicatorText: url.indicatorText || ''
612        }, Ext.isObject(url) ? url : {}));
613        return this;
614    },
615
616    /**
617     * Tests various css rules/browsers to determine if this element uses a border box
618     * @return {Boolean}
619     */
620    isBorderBox : function(){
621        return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox;
622    },
623
624    /**
625     * Removes this element from the DOM and deletes it from the cache
626     */
627    remove : function(){
628        var me = this,
629            dom = me.dom;
630       
631        me.removeAllListeners();
632        delete El.cache[dom.id];
633        delete El.dataCache[dom.id]
634        Ext.removeNode(dom);
635    },
636
637    /**
638     * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.
639     * @param {Function} overFn The function to call when the mouse enters the Element.
640     * @param {Function} outFn The function to call when the mouse leaves the Element.
641     * @param {Object} scope (optional) The scope (<tt>this</tt> reference) in which the functions are executed. Defaults to the Element's DOM element.
642     * @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the <tt>options</tt> parameter}.
643     * @return {Ext.Element} this
644     */
645    hover : function(overFn, outFn, scope, options){
646        var me = this;
647        me.on('mouseenter', overFn, scope || me.dom, options);
648        me.on('mouseleave', outFn, scope || me.dom, options);
649        return me;
650    },
651
652    /**
653     * Returns true if this element is an ancestor of the passed element
654     * @param {HTMLElement/String} el The element to check
655     * @return {Boolean} True if this element is an ancestor of el, else false
656     */
657    contains : function(el){
658        return !el ? false : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el);
659    },
660
661    /**
662     * Returns the value of a namespaced attribute from the element's underlying DOM node.
663     * @param {String} namespace The namespace in which to look for the attribute
664     * @param {String} name The attribute name
665     * @return {String} The attribute value
666     * @deprecated
667     */
668    getAttributeNS : function(ns, name){
669        return this.getAttribute(name, ns); 
670    },
671   
672    /**
673     * Returns the value of an attribute from the element's underlying DOM node.
674     * @param {String} name The attribute name
675     * @param {String} namespace (optional) The namespace in which to look for the attribute
676     * @return {String} The attribute value
677     */
678    getAttribute : Ext.isIE ? function(name, ns){
679        var d = this.dom,
680            type = typeof d[ns + ":" + name];
681
682        if(['undefined', 'unknown'].indexOf(type) == -1){
683            return d[ns + ":" + name];
684        }
685        return d[name];
686    } : function(name, ns){
687        var d = this.dom;
688        return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name];
689    },
690   
691    /**
692    * Update the innerHTML of this element
693    * @param {String} html The new HTML
694    * @return {Ext.Element} this
695     */
696    update : function(html) {
697        this.dom.innerHTML = html;
698        return this;
699    }
700};
701
702var ep = El.prototype;
703
704El.addMethods = function(o){
705   Ext.apply(ep, o);
706};
707
708/**
709 * Appends an event handler (shorthand for {@link #addListener}).
710 * @param {String} eventName The type of event to handle
711 * @param {Function} fn The handler function the event invokes
712 * @param {Object} scope (optional) The scope (this element) of the handler function
713 * @param {Object} options (optional) An object containing standard {@link #addListener} options
714 * @member Ext.Element
715 * @method on
716 */
717ep.on = ep.addListener;
718
719/**
720 * Removes an event handler from this element (see {@link #removeListener} for additional notes).
721 * @param {String} eventName the type of event to remove
722 * @param {Function} fn the method the event invokes
723 * @param {Object} scope (optional) The scope (The <tt>this</tt> reference) of the handler function. Defaults
724 * to this Element.
725 * @return {Ext.Element} this
726 * @member Ext.Element
727 * @method un
728 */
729ep.un = ep.removeListener;
730
731/**
732 * true to automatically adjust width and height settings for box-model issues (default to true)
733 */
734ep.autoBoxAdjust = true;
735
736// private
737var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
738    docEl;
739
740/**
741 * @private
742 */
743El.cache = {};
744El.dataCache = {};
745
746/**
747 * Retrieves Ext.Element objects.
748 * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
749 * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
750 * its ID, use {@link Ext.ComponentMgr#get}.</p>
751 * <p>Uses simple caching to consistently return the same object. Automatically fixes if an
752 * object was recreated with the same id via AJAX or DOM.</p>
753 * @param {Mixed} el The id of the node, a DOM Node or an existing Element.
754 * @return {Element} The Element object (or null if no matching element was found)
755 * @static
756 * @member Ext.Element
757 * @method get
758 */
759El.get = function(el){
760    var ex,
761        elm,
762        id;
763    if(!el){ return null; }
764    if (typeof el == "string") { // element id
765        if (!(elm = DOC.getElementById(el))) {
766            return null;
767        }
768        if (ex = El.cache[el]) {
769            ex.dom = elm;
770        } else {
771            ex = El.cache[el] = new El(elm);
772        }
773        return ex;
774    } else if (el.tagName) { // dom element
775        if(!(id = el.id)){
776            id = Ext.id(el);
777        }
778        if(ex = El.cache[id]){
779            ex.dom = el;
780        }else{
781            ex = El.cache[id] = new El(el);
782        }
783        return ex;
784    } else if (el instanceof El) {
785        if(el != docEl){
786            el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
787                                                          // catch case where it hasn't been appended
788            El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
789        }
790        return el;
791    } else if(el.isComposite) {
792        return el;
793    } else if(Ext.isArray(el)) {
794        return El.select(el);
795    } else if(el == DOC) {
796        // create a bogus element object representing the document object
797        if(!docEl){
798            var f = function(){};
799            f.prototype = El.prototype;
800            docEl = new f();
801            docEl.dom = DOC;
802        }
803        return docEl;
804    }
805    return null;
806};
807
808// private method for getting and setting element data
809El.data = function(el, key, value){
810    var c = El.dataCache[el.id];
811    if(!c){
812        c = El.dataCache[el.id] = {};
813    }
814    if(arguments.length == 2){
815        return c[key];   
816    }else{
817        c[key] = value;
818    }
819};
820
821// private
822// Garbage collection - uncache elements/purge listeners on orphaned elements
823// so we don't hold a reference and cause the browser to retain them
824function garbageCollect(){
825    if(!Ext.enableGarbageCollector){
826        clearInterval(El.collectorThread);
827    } else {
828        var eid,
829            el,
830            d;
831
832        for(eid in El.cache){
833            el = El.cache[eid];
834            d = el.dom;
835            // -------------------------------------------------------
836            // Determining what is garbage:
837            // -------------------------------------------------------
838            // !d
839            // dom node is null, definitely garbage
840            // -------------------------------------------------------
841            // !d.parentNode
842            // no parentNode == direct orphan, definitely garbage
843            // -------------------------------------------------------
844            // !d.offsetParent && !document.getElementById(eid)
845            // display none elements have no offsetParent so we will
846            // also try to look it up by it's id. However, check
847            // offsetParent first so we don't do unneeded lookups.
848            // This enables collection of elements that are not orphans
849            // directly, but somewhere up the line they have an orphan
850            // parent.
851            // -------------------------------------------------------
852            if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){
853                delete El.cache[eid];
854                if(d && Ext.enableListenerCollection){
855                    Ext.EventManager.removeAll(d);
856                }
857            }
858        }
859    }
860}
861El.collectorThreadId = setInterval(garbageCollect, 30000);
862
863var flyFn = function(){};
864flyFn.prototype = El.prototype;
865
866// dom is optional
867El.Flyweight = function(dom){
868    this.dom = dom;
869};
870
871El.Flyweight.prototype = new flyFn();
872El.Flyweight.prototype.isFlyweight = true;
873El._flyweights = {};
874
875/**
876 * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
877 * the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p>
878 * <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
879 * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}
880 * will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p>
881 * @param {String/HTMLElement} el The dom node or id
882 * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
883 * (e.g. internally Ext uses "_global")
884 * @return {Element} The shared Element object (or null if no matching element was found)
885 * @member Ext.Element
886 * @method fly
887 */
888El.fly = function(el, named){
889    var ret = null;
890    named = named || '_global';
891
892    if (el = Ext.getDom(el)) {
893        (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;
894        ret = El._flyweights[named];
895    }
896    return ret;
897};
898
899/**
900 * Retrieves Ext.Element objects.
901 * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
902 * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
903 * its ID, use {@link Ext.ComponentMgr#get}.</p>
904 * <p>Uses simple caching to consistently return the same object. Automatically fixes if an
905 * object was recreated with the same id via AJAX or DOM.</p>
906 * Shorthand of {@link Ext.Element#get}
907 * @param {Mixed} el The id of the node, a DOM Node or an existing Element.
908 * @return {Element} The Element object (or null if no matching element was found)
909 * @member Ext
910 * @method get
911 */
912Ext.get = El.get;
913
914/**
915 * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
916 * the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p>
917 * <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
918 * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get}
919 * will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p>
920 * @param {String/HTMLElement} el The dom node or id
921 * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
922 * (e.g. internally Ext uses "_global")
923 * @return {Element} The shared Element object (or null if no matching element was found)
924 * @member Ext
925 * @method fly
926 */
927Ext.fly = El.fly;
928
929// speedy lookup for elements never to box adjust
930var noBoxAdjust = Ext.isStrict ? {
931    select:1
932} : {
933    input:1, select:1, textarea:1
934};
935if(Ext.isIE || Ext.isGecko){
936    noBoxAdjust['button'] = 1;
937}
938
939
940Ext.EventManager.on(window, 'unload', function(){
941    delete El.cache;
942    delete El.dataCache;
943    delete El._flyweights;
944});
945})();
Note: See TracBrowser for help on using the repository browser.