src/core/CompositeElement.js

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**\r
   8  * @class Ext.CompositeElement\r
   9  * @extends Ext.CompositeElementLite\r
  10  * Standard composite class. Creates a Ext.Element for every element in the collection.\r
  11  * <br><br>\r
  12  * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Ext.Element. All Ext.Element\r
  13  * actions will be performed on all the elements in this collection.</b>\r
  14  * <br><br>\r
  15  * All methods return <i>this</i> and can be chained.\r
  16  <pre><code>\r
  17  var els = Ext.select("#some-el div.some-class", true);\r
  18  // or select directly from an existing element\r
  19  var el = Ext.get('some-el');\r
  20  el.select('div.some-class', true);\r
  21 \r
  22  els.setWidth(100); // all elements become 100 width\r
  23  els.hide(true); // all elements fade out and hide\r
  24  // or\r
  25  els.setWidth(100).hide(true);\r
  26  </code></pre>\r
  27  */\r
  28 Ext.CompositeElement = function(els, root){\r
  29     this.elements = [];\r
  30     this.add(els, root);\r
  31 };\r
  32 \r
  33 Ext.extend(Ext.CompositeElement, Ext.CompositeElementLite, {\r
  34     invoke : function(fn, args){\r
  35             Ext.each(this.elements, function(e) {\r
  36                 Ext.Element.prototype[fn].apply(e, args);\r
  37         });\r
  38         return this;\r
  39     },\r
  40 \r
  41     /**\r
  42     * Adds elements to this composite.\r
  43     * @param {String/Array} els A string CSS selector, an array of elements or an element\r
  44     * @return {CompositeElement} this\r
  45     */\r
  46     add : function(els, root){\r
  47             if(!els){\r
  48             return this;\r
  49         }\r
  50         if(typeof els == "string"){\r
  51             els = Ext.Element.selectorFunction(els, root);\r
  52         }\r
  53         var yels = this.elements;\r
  54             Ext.each(els, function(e) {\r
  55                 yels.push(Ext.get(e));\r
  56         });\r
  57         return this;\r
  58     },\r
  59 \r
  60     /**\r
  61      * Returns the Element object at the specified index\r
  62      * @param {Number} index\r
  63      * @return {Ext.Element}\r
  64      */\r
  65     item : function(index){\r
  66         return this.elements[index] || null;\r
  67     },\r
  68 \r
  69 \r
  70     indexOf : function(el){\r
  71         return this.elements.indexOf(Ext.get(el));\r
  72     },\r
  73 \r
  74     filter : function(selector){\r
  75                 var me = this,\r
  76                         out = [];\r
  77 \r
  78                 Ext.each(me.elements, function(el) {\r
  79                         if(el.is(selector)){\r
  80                                 out.push(Ext.get(el));\r
  81                         }\r
  82                 });\r
  83                 me.elements = out;\r
  84                 return me;\r
  85         },\r
  86 \r
  87     /**\r
  88      * Iterates each <code>element</code> in this <code>composite</code>\r
  89      * calling the supplied function using {@link Ext#each}.\r
  90      * @param {Function} fn The function to be called with each\r
  91      * <code>element</code>. If the supplied function returns <tt>false</tt>,\r
  92      * iteration stops. This function is called with the following arguments:\r
  93      * <div class="mdetail-params"><ul>\r
  94      * <li><code>element</code> : <i>Object</i>\r
  95      * <div class="sub-desc">The element at the current <code>index</code>\r
  96      * in the <code>composite</code></div></li>\r
  97      * <li><code>composite</code> : <i>Object</i>\r
  98      * <div class="sub-desc">This composite.</div></li>\r
  99      * <li><code>index</code> : <i>Number</i>\r
 100      * <div class="sub-desc">The current index within the <code>composite</code>\r
 101      * </div></li>\r
 102      * </ul></div>\r
 103      * @param {Object} scope (optional) The scope to call the specified function.\r
 104      * Defaults to the <code>element</code> at the current <code>index</code>\r
 105      * within the composite.\r
 106      * @return {CompositeElement} this\r
 107      */\r
 108     each : function(fn, scope){\r
 109         Ext.each(this.elements, function(e, i){\r
 110             return fn.call(scope || e, e, this, i);\r
 111         }, this);\r
 112         return this;\r
 113     }\r
 114 });\r
 115 \r
 116 /**\r
 117  * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods\r
 118  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or\r
 119  * {@link Ext.CompositeElementLite CompositeElementLite} object.\r
 120  * @param {String/Array} selector The CSS selector or an array of elements\r
 121  * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)\r
 122  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root\r
 123  * @return {CompositeElementLite/CompositeElement}\r
 124  * @member Ext.Element\r
 125  * @method select\r
 126  */\r
 127 Ext.Element.select = function(selector, unique, root){\r
 128     var els;\r
 129     if(typeof selector == "string"){\r
 130         els = Ext.Element.selectorFunction(selector, root);\r
 131     }else if(selector.length !== undefined){\r
 132         els = selector;\r
 133     }else{\r
 134         throw "Invalid selector";\r
 135     }\r
 136 \r
 137     return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);\r
 138 };\r
 139 \r
 140 /**\r
 141  * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods\r
 142  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or\r
 143  * {@link Ext.CompositeElementLite CompositeElementLite} object.\r
 144  * @param {String/Array} selector The CSS selector or an array of elements\r
 145  * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)\r
 146  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root\r
 147  * @return {CompositeElementLite/CompositeElement}\r
 148  * @member Ext.Element\r
 149  * @method select\r
 150  */\r
 151 Ext.select = Ext.Element.select;