docs/api/Ext.CompositeElementLite.html

   1 <!DOCTYPE html><html><head><title>Ext.CompositeElementLite | 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.CompositeElementLite',
  13         docClass: 'Ext.CompositeElementLite',
  14         docReq: 'Ext.CompositeElementLite',
  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 = 'CompositeElementLite-more.html#Ext-CompositeElementLite';
  33     clsInfo = {"methods":["add","clear","contains","each","fill","filter","first","getCount","indexOf","item","last","removeElement","replaceElement"],"cfgs":[],"properties":["elements"],"events":[],"subclasses":["Ext.CompositeElement"]};
  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/CompositeElementLite-more.html#Ext-CompositeElementLite" target="_blank">Ext.CompositeElementLite</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><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>Example:</p>
  46
  47 <pre class="prettyprint"><code>var els = Ext.select("#some-el div.some-class");
  48 // or select directly from an existing element
  49 var el = Ext.get('some-el');
  50 el.select('div.some-class');
  51
  52 els.setWidth(100); // all elements become 100 width
  53 els.hide(true); // all elements fade out and hide
  54 // or
  55 els.setWidth(100).hide(true);
  56 </code></pre>
  57
  58 <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-elements" class="member f ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.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.
  59
  60
  61 This will not usually be accessed in...</div><div class="long"><p>The Array of DOM elements which this CompositeElement encapsulates. Read-only.</p>
  62
  63
  64 <p>This will not <i>usually</i> be accessed in developers' code, but developers wishing
  65 to augment the capabilities of the CompositeElementLite class may use it when adding
  66 methods to the class.</p>
  67
  68
  69 <p>For example to add the <code>nextAll</code> method to the class to <b>add</b> all
  70 following siblings of selected elements, the code would be</p>
  71
  72
  73 <p><code></p>
  74
  75 <pre>Ext.override(Ext.CompositeElementLite, {
  76     nextAll: function() {
  77         var els = this.elements, i, l = els.length, n, r = [], ri = -1;
  78
  79 //      Loop through all elements in this Composite, accumulating
  80 //      an Array of all siblings.
  81         for (i = 0; i < l; i++) {
  82             for (n = els[i].nextSibling; n; n = n.nextSibling) {
  83                 r[++ri] = n;
  84             }
  85         }
  86
  87 //      Add all found siblings to this Composite
  88         return this.add(r);
  89     }
  90 });</pre>
  91
  92
  93 <p></code></p>
  94 </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 ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.html#" rel="method-add" class="cls expand">add</a>(
  95 <span class="pre">Mixed els, Object root</span>)
  96  : CompositeElement</div><div class="description"><div class="short"><p>Adds elements to this Composite object.</p>
  97 </div><div class="long"><p>Adds elements to this Composite object.</p>
  98 <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>
  99 </div></li><li><span class="pre">root</span> : Object<div class="sub-desc">
 100 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>This Composite object.</p>
 101 </li></ul></div></div></div><div id="method-clear" class="member ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.html#" rel="method-clear" class="cls expand">clear</a> : void</div><div class="description"><div class="short"><p>Removes all elements.</p>
 102 </div><div class="long"><p>Removes all elements.</p>
 103 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 104 </li></ul></div></div></div><div id="method-contains" class="member ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.html#" rel="method-contains" class="cls expand">contains</a>(
 105 <span class="pre">Object el</span>)
 106  : void</div><div class="description"><div class="short"><p>Returns true if this composite contains the passed element</p>
 107 </div><div class="long"><p>Returns true if this composite contains the passed element</p>
 108 <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>
 109 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;<p>Boolean</p>
 110 </li></ul></div></div></div><div id="method-each" class="member ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.html#" rel="method-each" class="cls expand">each</a>(
 111 <span class="pre">Function fn, [Object scope]</span>)
 112  : CompositeElement</div><div class="description"><div class="short"><p>Calls the passed function for each element in this composite.</p>
 113
 114 </div><div class="long"><p>Calls the passed function for each element in this composite.</p>
 115
 116 <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>
 117 <li><b>el</b> : Element<div class="sub-desc">The current Element in the iteration.
 118 <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
 119 a reference to the dom node, use el.dom.</b></div></li>
 120 <li><b>c</b> : Composite<div class="sub-desc">This Composite object.</div></li>
 121 <li><b>idx</b> : Number<div class="sub-desc">The zero-based index in the iteration.</div></li>
 122 </ul></p>
 123 </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>
 124 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
 125 </li></ul></div></div></div><div id="method-fill" class="member ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.html#" rel="method-fill" class="cls expand">fill</a>(
 126 <span class="pre">Mixed els</span>)
 127  : CompositeElement</div><div class="description"><div class="short"><p>Clears this Composite and adds the elements passed.</p>
 128 </div><div class="long"><p>Clears this Composite and adds the elements passed.</p>
 129 <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>
 130 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
 131 </li></ul></div></div></div><div id="method-filter" class="member ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.html#" rel="method-filter" class="cls expand">filter</a>(
 132 <span class="pre">String/Function selector</span>)
 133  : CompositeElement</div><div class="description"><div class="short"><p>Filters this composite to only elements that match the passed selector.</p>
 134 </div><div class="long"><p>Filters this composite to only elements that match the passed selector.</p>
 135 <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.
 136 The comparison function will be called with the following arguments:<ul>
 137 <li><code>el</code> : Ext.core.Element<div class="sub-desc">The current DOM element.</div></li>
 138 <li><code>index</code> : Number<div class="sub-desc">The current index within the collection.</div></li>
 139 </ul></p>
 140 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
 141 </li></ul></div></div></div><div id="method-first" class="member ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.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>
 142 </div><div class="long"><p>Returns the first Element</p>
 143 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 144 </li></ul></div></div></div><div id="method-getCount" class="member ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.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>
 145 </div><div class="long"><p>Returns the number of elements in this Composite.</p>
 146 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;<p>Number</p>
 147 </li></ul></div></div></div><div id="method-indexOf" class="member ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.html#" rel="method-indexOf" class="cls expand">indexOf</a>(
 148 <span class="pre">Object el</span>)
 149  : void</div><div class="description"><div class="short"><p>Find the index of the passed element within the composite collection.</p>
 150 </div><div class="long"><p>Find the index of the passed element within the composite collection.</p>
 151 <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>
 152 </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>
 153 </li></ul></div></div></div><div id="method-item" class="member ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.html#" rel="method-item" class="cls expand">item</a>(
 154 <span class="pre">Number index</span>)
 155  : 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>
 156 </div><div class="long"><p>Returns a flyweight Element of the dom element object at the specified index</p>
 157 <h3 class="pa">Parameters</h3><ul><li><span class="pre">index</span> : Number<div class="sub-desc">
 158 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 159 </li></ul></div></div></div><div id="method-last" class="member ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.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>
 160 </div><div class="long"><p>Returns the last Element</p>
 161 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 162 </li></ul></div></div></div><div id="method-removeElement" class="member ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.html#" rel="method-removeElement" class="cls expand">removeElement</a>(
 163 <span class="pre">Mixed el, [Boolean removeDom]</span>)
 164  : CompositeElement</div><div class="description"><div class="short"><p>Removes the specified element(s).</p>
 165 </div><div class="long"><p>Removes the specified element(s).</p>
 166 <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
 167 or an array of any of those.</p>
 168 </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>
 169 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
 170 </li></ul></div></div></div><div id="method-replaceElement" class="member ni"><a href="Ext.CompositeElementLite.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.CompositeElementLite.html#" rel="method-replaceElement" class="cls expand">replaceElement</a>(
 171 <span class="pre">Mixed el, Mixed replacement, Boolean domReplace</span>)
 172  : CompositeElement</div><div class="description"><div class="short"><p>Replaces the specified element with the passed element.</p>
 173 </div><div class="long"><p>Replaces the specified element with the passed element.</p>
 174 <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
 175 to replace.</p>
 176 </div></li><li><span class="pre">replacement</span> : Mixed<div class="sub-desc"><p>The id of an element or the Element itself.</p>
 177 </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>
 178 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">CompositeElement</span>&nbsp; &nbsp;<p>this</p>
 179 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>