3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.CompositeElement
\r
9 * @extends Ext.CompositeElementLite
\r
10 * <p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter
\r
11 * members, or to perform collective actions upon the whole set.</p>
\r
12 * <p>Although they are not listed, this class supports all of the methods of {@link Ext.Element} and
\r
13 * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.</p>
\r
14 * <p>All methods return <i>this</i> and can be chained.</p>
\r
17 var els = Ext.select("#some-el div.some-class", true);
\r
18 // or select directly from an existing element
\r
19 var el = Ext.get('some-el');
\r
20 el.select('div.some-class', true);
\r
22 els.setWidth(100); // all elements become 100 width
\r
23 els.hide(true); // all elements fade out and hide
\r
25 els.setWidth(100).hide(true);
\r
28 Ext.CompositeElement = function(els, root){
\r
30 this.add(els, root);
\r
33 Ext.extend(Ext.CompositeElement, Ext.CompositeElementLite, {
\r
36 getElement : function(el){
\r
37 // In this case just return it, since we already have a reference to it
\r
42 transformElement : function(el){
\r
47 * Adds elements to this composite.
\r
48 * @param {String/Array} els A string CSS selector, an array of elements or an element
\r
49 * @return {CompositeElement} this
\r
53 * Returns the Element object at the specified index
\r
54 * @param {Number} index
\r
55 * @return {Ext.Element}
\r
59 * Iterates each <code>element</code> in this <code>composite</code>
\r
60 * calling the supplied function using {@link Ext#each}.
\r
61 * @param {Function} fn The function to be called with each
\r
62 * <code>element</code>. If the supplied function returns <tt>false</tt>,
\r
63 * iteration stops. This function is called with the following arguments:
\r
64 * <div class="mdetail-params"><ul>
\r
65 * <li><code>element</code> : <i>Ext.Element</i><div class="sub-desc">The element at the current <code>index</code>
\r
66 * in the <code>composite</code></div></li>
\r
67 * <li><code>composite</code> : <i>Object</i> <div class="sub-desc">This composite.</div></li>
\r
68 * <li><code>index</code> : <i>Number</i> <div class="sub-desc">The current index within the <code>composite</code> </div></li>
\r
70 * @param {Object} scope (optional) The scope (<code><this</code> reference) in which the specified function is executed.
\r
71 * Defaults to the <code>element</code> at the current <code>index</code>
\r
72 * within the composite.
\r
73 * @return {CompositeElement} this
\r
78 * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
\r
79 * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
\r
80 * {@link Ext.CompositeElementLite CompositeElementLite} object.
\r
81 * @param {String/Array} selector The CSS selector or an array of elements
\r
82 * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
\r
83 * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
\r
84 * @return {CompositeElementLite/CompositeElement}
\r
85 * @member Ext.Element
\r
88 Ext.Element.select = function(selector, unique, root){
\r
90 if(typeof selector == "string"){
\r
91 els = Ext.Element.selectorFunction(selector, root);
\r
92 }else if(selector.length !== undefined){
\r
95 throw "Invalid selector";
\r
98 return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);
\r
102 * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
\r
103 * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
\r
104 * {@link Ext.CompositeElementLite CompositeElementLite} object.
\r
105 * @param {String/Array} selector The CSS selector or an array of elements
\r
106 * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
\r
107 * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
\r
108 * @return {CompositeElementLite/CompositeElement}
\r
109 * @member Ext.Element
\r
112 Ext.select = Ext.Element.select;