Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / docs / source / CompositeElement.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.2.0
11  * Copyright(c) 2006-2010 Ext JS, Inc.
12  * licensing@extjs.com
13  * http://www.extjs.com/license
14  */
15 <div id="cls-Ext.CompositeElement"></div>/**
16  * @class Ext.CompositeElement
17  * @extends Ext.CompositeElementLite
18  * <p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter
19  * members, or to perform collective actions upon the whole set.</p>
20  * <p>Although they are not listed, this class supports all of the methods of {@link Ext.Element} and
21  * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.</p>
22  * <p>All methods return <i>this</i> and can be chained.</p>
23  * Usage:
24 <pre><code>
25 var els = Ext.select("#some-el div.some-class", true);
26 // or select directly from an existing element
27 var el = Ext.get('some-el');
28 el.select('div.some-class', true);
29
30 els.setWidth(100); // all elements become 100 width
31 els.hide(true); // all elements fade out and hide
32 // or
33 els.setWidth(100).hide(true);
34 </code></pre>
35  */
36 Ext.CompositeElement = function(els, root){
37     this.elements = [];
38     this.add(els, root);
39 };
40
41 Ext.extend(Ext.CompositeElement, Ext.CompositeElementLite, {
42     
43     // private
44     getElement : function(el){
45         // In this case just return it, since we already have a reference to it
46         return el;
47     },
48     
49     // private
50     transformElement : function(el){
51         return Ext.get(el);
52     }
53
54     /**
55     * Adds elements to this composite.
56     * @param {String/Array} els A string CSS selector, an array of elements or an element
57     * @return {CompositeElement} this
58     */
59
60     /**
61      * Returns the Element object at the specified index
62      * @param {Number} index
63      * @return {Ext.Element}
64      */
65
66     <div id="method-Ext.CompositeElement-"></div>/**
67      * Iterates each <code>element</code> in this <code>composite</code>
68      * calling the supplied function using {@link Ext#each}.
69      * @param {Function} fn The function to be called with each
70      * <code>element</code>. If the supplied function returns <tt>false</tt>,
71      * iteration stops. This function is called with the following arguments:
72      * <div class="mdetail-params"><ul>
73      * <li><code>element</code> : <i>Ext.Element</i><div class="sub-desc">The element at the current <code>index</code>
74      * in the <code>composite</code></div></li>
75      * <li><code>composite</code> : <i>Object</i> <div class="sub-desc">This composite.</div></li>
76      * <li><code>index</code> : <i>Number</i> <div class="sub-desc">The current index within the <code>composite</code> </div></li>
77      * </ul></div>
78      * @param {Object} scope (optional) The scope (<code><this</code> reference) in which the specified function is executed.
79      * Defaults to the <code>element</code> at the current <code>index</code>
80      * within the composite.
81      * @return {CompositeElement} this
82      */
83 });
84
85 /**
86  * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
87  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
88  * {@link Ext.CompositeElementLite CompositeElementLite} object.
89  * @param {String/Array} selector The CSS selector or an array of elements
90  * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
91  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
92  * @return {CompositeElementLite/CompositeElement}
93  * @member Ext.Element
94  * @method select
95  */
96 Ext.Element.select = function(selector, unique, root){
97     var els;
98     if(typeof selector == "string"){
99         els = Ext.Element.selectorFunction(selector, root);
100     }else if(selector.length !== undefined){
101         els = selector;
102     }else{
103         throw "Invalid selector";
104     }
105
106     return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);
107 };
108
109 <div id="method-Ext.Element-select"></div>/**
110  * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
111  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
112  * {@link Ext.CompositeElementLite CompositeElementLite} object.
113  * @param {String/Array} selector The CSS selector or an array of elements
114  * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
115  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
116  * @return {CompositeElementLite/CompositeElement}
117  * @member Ext.Element
118  * @method select
119  */
120 Ext.select = Ext.Element.select;</pre>    
121 </body>
122 </html>