docs/source/CompositeElement.html

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