src/core/CompositeElement.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**
   8  * @class Ext.CompositeElement
   9  * @extends Ext.CompositeElementLite
  10  * <p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter
  11  * members, or to perform collective actions upon the whole set.</p>
  12  * <p>Although they are not listed, this class supports all of the methods of {@link Ext.Element} and
  13  * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.</p>
  14  * <p>All methods return <i>this</i> and can be chained.</p>
  15  * Usage:
  16 <pre><code>
  17 var els = Ext.select("#some-el div.some-class", true);
  18 // or select directly from an existing element
  19 var el = Ext.get('some-el');
  20 el.select('div.some-class', true);
  21
  22 els.setWidth(100); // all elements become 100 width
  23 els.hide(true); // all elements fade out and hide
  24 // or
  25 els.setWidth(100).hide(true);
  26 </code></pre>
  27  */
  28 Ext.CompositeElement = Ext.extend(Ext.CompositeElementLite, {
  29
  30     constructor : function(els, root){
  31         this.elements = [];
  32         this.add(els, root);
  33     },
  34
  35     // private
  36     getElement : function(el){
  37         // In this case just return it, since we already have a reference to it
  38         return el;
  39     },
  40
  41     // private
  42     transformElement : function(el){
  43         return Ext.get(el);
  44     }
  45
  46     /**
  47     * Adds elements to this composite.
  48     * @param {String/Array} els A string CSS selector, an array of elements or an element
  49     * @return {CompositeElement} this
  50     */
  51
  52     /**
  53      * Returns the Element object at the specified index
  54      * @param {Number} index
  55      * @return {Ext.Element}
  56      */
  57
  58     /**
  59      * Iterates each <code>element</code> in this <code>composite</code>
  60      * calling the supplied function using {@link Ext#each}.
  61      * @param {Function} fn The function to be called with each
  62      * <code>element</code>. If the supplied function returns <tt>false</tt>,
  63      * iteration stops. This function is called with the following arguments:
  64      * <div class="mdetail-params"><ul>
  65      * <li><code>element</code> : <i>Ext.Element</i><div class="sub-desc">The element at the current <code>index</code>
  66      * in the <code>composite</code></div></li>
  67      * <li><code>composite</code> : <i>Object</i> <div class="sub-desc">This composite.</div></li>
  68      * <li><code>index</code> : <i>Number</i> <div class="sub-desc">The current index within the <code>composite</code> </div></li>
  69      * </ul></div>
  70      * @param {Object} scope (optional) The scope (<code><this</code> reference) in which the specified function is executed.
  71      * Defaults to the <code>element</code> at the current <code>index</code>
  72      * within the composite.
  73      * @return {CompositeElement} this
  74      */
  75 });
  76
  77 /**
  78  * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
  79  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
  80  * {@link Ext.CompositeElementLite CompositeElementLite} object.
  81  * @param {String/Array} selector The CSS selector or an array of elements
  82  * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
  83  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
  84  * @return {CompositeElementLite/CompositeElement}
  85  * @member Ext.Element
  86  * @method select
  87  */
  88 Ext.Element.select = function(selector, unique, root){
  89     var els;
  90     if(typeof selector == "string"){
  91         els = Ext.Element.selectorFunction(selector, root);
  92     }else if(selector.length !== undefined){
  93         els = selector;
  94     }else{
  95         throw "Invalid selector";
  96     }
  97
  98     return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);
  99 };
 100
 101 /**
 102  * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
 103  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
 104  * {@link Ext.CompositeElementLite CompositeElementLite} object.
 105  * @param {String/Array} selector The CSS selector or an array of elements
 106  * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
 107  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
 108  * @return {CompositeElementLite/CompositeElement}
 109  * @member Ext
 110  * @method select
 111  */
 112 Ext.select = Ext.Element.select;