docs/api/Ext.CompositeElement.html

   1 <!DOCTYPE html><html><head><title>Ext.CompositeElement | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.CompositeElement',
  13         docClass: 'Ext.CompositeElement',
  14         docReq: 'Ext.CompositeElement',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'CompositeElement2.html#Ext-CompositeElement';
  33     clsInfo = {"methods":["add","clear","contains","each","fill","filter","first","getCount","indexOf","item","last","removeElement","replaceElement"],"cfgs":[],"properties":["","elements"],"events":[],"subclasses":[]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/CompositeElement2.html#Ext-CompositeElement" target="_blank">Ext.CompositeElement</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><pre class="subclasses"><h4>Hierarchy</h4><div class="subclass f"><a href="Ext.CompositeElementLite.html" rel="Ext.CompositeElementLite" class="cls docClass">Ext.CompositeElementLite</a><div class="subclass"><strong>Ext.CompositeElement</strong></div></div></pre><p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter
  38 members, or to perform collective actions upon the whole set.</p>
  39
  40
  41 <p>Although they are not listed, this class supports all of the methods of <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> and
  42 <a href="Ext.fx.Anim.html" rel="Ext.fx.Anim" class="docClass">Ext.fx.Anim</a>. The methods from these classes will be performed on all the elements in this collection.</p>
  43
  44
  45 <p>All methods return <i>this</i> and can be chained.</p>
  46
  47
  48 <p>Usage:</p>
  49
  50 <pre class="prettyprint"><code>var els = Ext.select("#some-el div.some-class", true);
  51 // or select directly from an existing element
  52 var el = Ext.get('some-el');
  53 el.select('div.some-class', true);
  54
  55 els.setWidth(100); // all elements become 100 width
  56 els.hide(true); // all elements fade out and hide
  57 // or
  58 els.setWidth(100).hide(true);
  59 </code></pre>
  60
  61 <div class="members"><div class="m-properties"><a name="properties"></a><div class="definedBy">Defined By</div><h3 class="prp p">Properties</h3><div id="property-" class="member f ni"><a href="Ext.CompositeElement.html#property-" rel="property-" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElement.html" class="definedIn docClass">Ext.CompositeElement</a><br/><a href="../source/CompositeElement2.html#Ext-CompositeElement-property-" class="viewSource">view source</a></div><a></a><a name="property-"></a><a href="Ext.CompositeElement.html#" rel="property-" class="cls expand"></a><span> : Object</span></div><div class="description"><div class="short"><p>Iterates each <code>element</code> in this <code>composite</code> calling the supplied function using <a href="Ext.html#each" rel="Ext#each" class="docClass">Ext.each</a>.</p>
  62 </div><div class="long"><p>Iterates each <code>element</code> in this <code>composite</code> calling the supplied function using <a href="Ext.html#each" rel="Ext#each" class="docClass">Ext.each</a>.</p>
  63 </div></div></div><div id="property-elements" class="member inherited"><a href="Ext.CompositeElement.html#property-elements" rel="property-elements" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-property-elements" class="viewSource">view source</a></div><a name="elements"></a><a name="property-elements"></a><a href="Ext.CompositeElement.html#" rel="property-elements" class="cls expand">elements</a><span> : Array</span></div><div class="description"><div class="short">The Array of DOM elements which this CompositeElement encapsulates. Read-only.
  64
  65
  66 This will not usually be accessed in...</div><div class="long"><p>The Array of DOM elements which this CompositeElement encapsulates. Read-only.</p>
  67
  68
  69 <p>This will not <i>usually</i> be accessed in developers' code, but developers wishing
  70 to augment the capabilities of the CompositeElementLite class may use it when adding
  71 methods to the class.</p>
  72
  73
  74 <p>For example to add the <code>nextAll</code> method to the class to <b>add</b> all
  75 following siblings of selected elements, the code would be</p>
  76
  77
  78 <p><code></p>
  79
  80 <pre>Ext.override(Ext.CompositeElementLite, {
  81     nextAll: function() {
  82         var els = this.elements, i, l = els.length, n, r = [], ri = -1;
  83
  84 //      Loop through all elements in this Composite, accumulating
  85 //      an Array of all siblings.
  86         for (i = 0; i < l; i++) {
  87             for (n = els[i].nextSibling; n; n = n.nextSibling) {
  88                 r[++ri] = n;
  89             }
  90         }
  91
  92 //      Add all found siblings to this Composite
  93         return this.add(r);
  94     }
  95 });</pre>
  96
  97
  98 <p></code></p>
  99 </div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-add" class="member f inherited"><a href="Ext.CompositeElement.html#method-add" rel="method-add" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-add" class="viewSource">view source</a></div><a name="add"></a><a name="method-add"></a><a href="Ext.CompositeElement.html#" rel="method-add" class="cls expand">add</a>(
 100 <span class="pre">Mixed els, Object root</span>)
 101  : CompositeElement</div><div class="description"><div class="short"><p>Adds elements to this Composite object.</p>
 102 </div><div class="long"><p>Adds elements to this Composite object.</p>
 103 <h3 class="pa">Parameters</h3><ul><li><span class="pre">els</span> : Mixed<div class="sub-desc"><p>Either an Array of DOM elements to add, or another Composite object who's elements should be added.</p>
 104 </div></li><li><span class="pre">root</span> : Object<div class="sub-desc">
 105 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>This Composite object.</p>
 106 </li></ul></div></div></div><div id="method-clear" class="member inherited"><a href="Ext.CompositeElement.html#method-clear" rel="method-clear" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-clear" class="viewSource">view source</a></div><a name="clear"></a><a name="method-clear"></a><a href="Ext.CompositeElement.html#" rel="method-clear" class="cls expand">clear</a> : void</div><div class="description"><div class="short"><p>Removes all elements.</p>
 107 </div><div class="long"><p>Removes all elements.</p>
 108 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 109 </li></ul></div></div></div><div id="method-contains" class="member inherited"><a href="Ext.CompositeElement.html#method-contains" rel="method-contains" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite-more.html#Ext-CompositeElementLite-method-contains" class="viewSource">view source</a></div><a name="contains"></a><a name="method-contains"></a><a href="Ext.CompositeElement.html#" rel="method-contains" class="cls expand">contains</a>(
 110 <span class="pre">Object el</span>)
 111  : void</div><div class="description"><div class="short"><p>Returns true if this composite contains the passed element</p>
 112 </div><div class="long"><p>Returns true if this composite contains the passed element</p>
 113 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Object<div class="sub-desc"><p>{Mixed} The id of an element, or an <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a>, or an HtmlElement to find within the composite collection.</p>
 114 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;<p>Boolean</p>
 115 </li></ul></div></div></div><div id="method-each" class="member inherited"><a href="Ext.CompositeElement.html#method-each" rel="method-each" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-each" class="viewSource">view source</a></div><a name="each"></a><a name="method-each"></a><a href="Ext.CompositeElement.html#" rel="method-each" class="cls expand">each</a>(
 116 <span class="pre">Function fn, [Object scope]</span>)
 117  : CompositeElement</div><div class="description"><div class="short"><p>Calls the passed function for each element in this composite.</p>
 118
 119 </div><div class="long"><p>Calls the passed function for each element in this composite.</p>
 120
 121 <h3 class="pa">Parameters</h3><ul><li><span class="pre">fn</span> : Function<div class="sub-desc"><p>The function to call. The function is passed the following parameters:<ul>
 122 <li><b>el</b> : Element<div class="sub-desc">The current Element in the iteration.
 123 <b>This is the flyweight (shared) <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> instance, so if you require a
 124 a reference to the dom node, use el.dom.</b></div></li>
 125 <li><b>c</b> : Composite<div class="sub-desc">This Composite object.</div></li>
 126 <li><b>idx</b> : Number<div class="sub-desc">The zero-based index in the iteration.</div></li>
 127 </ul></p>
 128 </div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>(optional) The scope (<i>this</i> reference) in which the function is executed. (defaults to the Element)</p>
 129 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
 130 </li></ul></div></div></div><div id="method-fill" class="member inherited"><a href="Ext.CompositeElement.html#method-fill" rel="method-fill" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-fill" class="viewSource">view source</a></div><a name="fill"></a><a name="method-fill"></a><a href="Ext.CompositeElement.html#" rel="method-fill" class="cls expand">fill</a>(
 131 <span class="pre">Mixed els</span>)
 132  : CompositeElement</div><div class="description"><div class="short"><p>Clears this Composite and adds the elements passed.</p>
 133 </div><div class="long"><p>Clears this Composite and adds the elements passed.</p>
 134 <h3 class="pa">Parameters</h3><ul><li><span class="pre">els</span> : Mixed<div class="sub-desc"><p>Either an array of DOM elements, or another Composite from which to fill this Composite.</p>
 135 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
 136 </li></ul></div></div></div><div id="method-filter" class="member inherited"><a href="Ext.CompositeElement.html#method-filter" rel="method-filter" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-filter" class="viewSource">view source</a></div><a name="filter"></a><a name="method-filter"></a><a href="Ext.CompositeElement.html#" rel="method-filter" class="cls expand">filter</a>(
 137 <span class="pre">String/Function selector</span>)
 138  : CompositeElement</div><div class="description"><div class="short"><p>Filters this composite to only elements that match the passed selector.</p>
 139 </div><div class="long"><p>Filters this composite to only elements that match the passed selector.</p>
 140 <h3 class="pa">Parameters</h3><ul><li><span class="pre">selector</span> : String/Function<div class="sub-desc"><p>A string CSS selector or a comparison function.
 141 The comparison function will be called with the following arguments:<ul>
 142 <li><code>el</code> : Ext.core.Element<div class="sub-desc">The current DOM element.</div></li>
 143 <li><code>index</code> : Number<div class="sub-desc">The current index within the collection.</div></li>
 144 </ul></p>
 145 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
 146 </li></ul></div></div></div><div id="method-first" class="member inherited"><a href="Ext.CompositeElement.html#method-first" rel="method-first" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite-more.html#Ext-CompositeElementLite-method-first" class="viewSource">view source</a></div><a name="first"></a><a name="method-first"></a><a href="Ext.CompositeElement.html#" rel="method-first" class="cls expand">first</a> : Ext.core.Element</div><div class="description"><div class="short"><p>Returns the first Element</p>
 147 </div><div class="long"><p>Returns the first Element</p>
 148 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 149 </li></ul></div></div></div><div id="method-getCount" class="member inherited"><a href="Ext.CompositeElement.html#method-getCount" rel="method-getCount" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-getCount" class="viewSource">view source</a></div><a name="getCount"></a><a name="method-getCount"></a><a href="Ext.CompositeElement.html#" rel="method-getCount" class="cls expand">getCount</a> : void</div><div class="description"><div class="short"><p>Returns the number of elements in this Composite.</p>
 150 </div><div class="long"><p>Returns the number of elements in this Composite.</p>
 151 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;<p>Number</p>
 152 </li></ul></div></div></div><div id="method-indexOf" class="member inherited"><a href="Ext.CompositeElement.html#method-indexOf" rel="method-indexOf" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-indexOf" class="viewSource">view source</a></div><a name="indexOf"></a><a name="method-indexOf"></a><a href="Ext.CompositeElement.html#" rel="method-indexOf" class="cls expand">indexOf</a>(
 153 <span class="pre">Object el</span>)
 154  : void</div><div class="description"><div class="short"><p>Find the index of the passed element within the composite collection.</p>
 155 </div><div class="long"><p>Find the index of the passed element within the composite collection.</p>
 156 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Object<div class="sub-desc"><p>{Mixed} The id of an element, or an <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a>, or an HtmlElement to find within the composite collection.</p>
 157 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;<p>Number The index of the passed <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> in the composite collection, or -1 if not found.</p>
 158 </li></ul></div></div></div><div id="method-item" class="member inherited"><a href="Ext.CompositeElement.html#method-item" rel="method-item" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-item" class="viewSource">view source</a></div><a name="item"></a><a name="method-item"></a><a href="Ext.CompositeElement.html#" rel="method-item" class="cls expand">item</a>(
 159 <span class="pre">Number index</span>)
 160  : Ext.core.Element</div><div class="description"><div class="short"><p>Returns a flyweight Element of the dom element object at the specified index</p>
 161 </div><div class="long"><p>Returns a flyweight Element of the dom element object at the specified index</p>
 162 <h3 class="pa">Parameters</h3><ul><li><span class="pre">index</span> : Number<div class="sub-desc">
 163 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 164 </li></ul></div></div></div><div id="method-last" class="member inherited"><a href="Ext.CompositeElement.html#method-last" rel="method-last" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite-more.html#Ext-CompositeElementLite-method-last" class="viewSource">view source</a></div><a name="last"></a><a name="method-last"></a><a href="Ext.CompositeElement.html#" rel="method-last" class="cls expand">last</a> : Ext.core.Element</div><div class="description"><div class="short"><p>Returns the last Element</p>
 165 </div><div class="long"><p>Returns the last Element</p>
 166 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 167 </li></ul></div></div></div><div id="method-removeElement" class="member inherited"><a href="Ext.CompositeElement.html#method-removeElement" rel="method-removeElement" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite-more.html#Ext-CompositeElementLite-method-removeElement" class="viewSource">view source</a></div><a name="removeElement"></a><a name="method-removeElement"></a><a href="Ext.CompositeElement.html#" rel="method-removeElement" class="cls expand">removeElement</a>(
 168 <span class="pre">Mixed el, [Boolean removeDom]</span>)
 169  : CompositeElement</div><div class="description"><div class="short"><p>Removes the specified element(s).</p>
 170 </div><div class="long"><p>Removes the specified element(s).</p>
 171 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The id of an element, the Element itself, the index of the element in this composite
 172 or an array of any of those.</p>
 173 </div></li><li><span class="pre">removeDom</span> : Boolean<div class="sub-desc"><p>(optional) True to also remove the element from the document</p>
 174 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
 175 </li></ul></div></div></div><div id="method-replaceElement" class="member inherited"><a href="Ext.CompositeElement.html#method-replaceElement" rel="method-replaceElement" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.CompositeElementLite.html" class="definedIn docClass">Ext.CompositeElementLite</a><br/><a href="../source/CompositeElementLite.html#Ext-CompositeElementLite-method-replaceElement" class="viewSource">view source</a></div><a name="replaceElement"></a><a name="method-replaceElement"></a><a href="Ext.CompositeElement.html#" rel="method-replaceElement" class="cls expand">replaceElement</a>(
 176 <span class="pre">Mixed el, Mixed replacement, Boolean domReplace</span>)
 177  : CompositeElement</div><div class="description"><div class="short"><p>Replaces the specified element with the passed element.</p>
 178 </div><div class="long"><p>Replaces the specified element with the passed element.</p>
 179 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The id of an element, the Element itself, the index of the element in this composite
 180 to replace.</p>
 181 </div></li><li><span class="pre">replacement</span> : Mixed<div class="sub-desc"><p>The id of an element or the Element itself.</p>
 182 </div></li><li><span class="pre">domReplace</span> : Boolean<div class="sub-desc"><p>(Optional) True to remove and replace the element in the document too.</p>
 183 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
 184 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>