docs/source/CompositeElement.html

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