src/core/CompositeElement.js

   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 /**\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     * Calls the passed function passing (el, this, index) for each element in this composite.\r
  89     * @param {Function} fn The function to call\r
  90     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)\r
  91     * @return {CompositeElement} this\r
  92     */\r
  93     each : function(fn, scope){        \r
  94         Ext.each(this.elements, function(e,i) {\r
  95                 return fn.call(scope || e, e, this, i);\r
  96         }, this);\r
  97         return this;\r
  98     }\r
  99 });\r
 100 \r
 101 /**\r
 102  * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods\r
 103  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or\r
 104  * {@link Ext.CompositeElementLite CompositeElementLite} object.\r
 105  * @param {String/Array} selector The CSS selector or an array of elements\r
 106  * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)\r
 107  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root\r
 108  * @return {CompositeElementLite/CompositeElement}\r
 109  * @member Ext.Element\r
 110  * @method select\r
 111  */\r
 112 Ext.Element.select = function(selector, unique, root){\r
 113     var els;\r
 114     if(typeof selector == "string"){\r
 115         els = Ext.Element.selectorFunction(selector, root);\r
 116     }else if(selector.length !== undefined){\r
 117         els = selector;\r
 118     }else{\r
 119         throw "Invalid selector";\r
 120     }\r
 121 \r
 122     return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);\r
 123 };
 124 \r
 125 /**\r
 126  * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods\r
 127  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or\r
 128  * {@link Ext.CompositeElementLite CompositeElementLite} object.\r
 129  * @param {String/Array} selector The CSS selector or an array of elements\r
 130  * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)\r
 131  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root\r
 132  * @return {CompositeElementLite/CompositeElement}\r
 133  * @member Ext.Element\r
 134  * @method select\r
 135  */\r
 136 Ext.select = Ext.Element.select;