4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * @class Roo.CompositeElement
15 * Standard composite class. Creates a Roo.Element for every element in the collection.
17 * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
18 * actions will be performed on all the elements in this collection.</b>
20 * All methods return <i>this</i> and can be chained.
22 var els = Roo.select("#some-el div.some-class", true);
23 // or select directly from an existing element
24 var el = Roo.get('some-el');
25 el.select('div.some-class', true);
27 els.setWidth(100); // all elements become 100 width
28 els.hide(true); // all elements fade out and hide
30 els.setWidth(100).hide(true);
33 Roo.CompositeElement = function(els){
35 this.addElements(els);
37 Roo.CompositeElement.prototype = {
39 addElements : function(els){
41 if(typeof els == "string"){
42 els = Roo.Element.selectorFunction(els);
44 var yels = this.elements;
45 var index = yels.length-1;
46 for(var i = 0, len = els.length; i < len; i++) {
47 yels[++index] = Roo.get(els[i]);
53 * Clears this composite and adds the elements returned by the passed selector.
54 * @param {String/Array} els A string CSS selector, an array of elements or an element
55 * @return {CompositeElement} this
64 * Filters this composite to only elements that match the passed selector.
65 * @param {String} selector A string CSS selector
66 * @param {Boolean} inverse return inverse filter (not matches)
67 * @return {CompositeElement} this
69 filter : function(selector, inverse){
71 inverse = inverse || false;
72 this.each(function(el){
73 var match = el.is(selector) ;
74 match = inverse ? !match : match;
76 els[els.length] = el.dom;
83 invoke : function(fn, args){
84 var els = this.elements;
85 for(var i = 0, len = els.length; i < len; i++) {
86 Roo.Element.prototype[fn].apply(els[i], args);
91 * Adds elements to this composite.
92 * @param {String/Array} els A string CSS selector, an array of elements or an element
93 * @return {CompositeElement} this
96 if(typeof els == "string"){
97 this.addElements(Roo.Element.selectorFunction(els));
98 }else if(els.length !== undefined){
99 this.addElements(els);
101 this.addElements([els]);
106 * Calls the passed function passing (el, this, index) for each element in this composite.
107 * @param {Function} fn The function to call
108 * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
109 * @return {CompositeElement} this
111 each : function(fn, scope){
112 var els = this.elements;
113 for(var i = 0, len = els.length; i < len; i++){
114 if(fn.call(scope || els[i], els[i], this, i) === false) {
122 * Returns the Element object at the specified index
123 * @param {Number} index
124 * @return {Roo.Element}
126 item : function(index){
127 return this.elements[index] || null;
131 * Returns the first Element
132 * @return {Roo.Element}
139 * Returns the last Element
140 * @return {Roo.Element}
143 return this.item(this.elements.length-1);
147 * Returns the number of elements in this composite
150 getCount : function(){
151 return this.elements.length;
155 * Returns true if this composite contains the passed element
158 contains : function(el){
159 return this.indexOf(el) !== -1;
163 * Returns true if this composite contains the passed element
166 indexOf : function(el){
167 return this.elements.indexOf(Roo.get(el));
172 * Removes the specified element(s).
173 * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
174 * or an array of any of those.
175 * @param {Boolean} removeDom (optional) True to also remove the element from the document
176 * @return {CompositeElement} this
178 removeElement : function(el, removeDom){
179 if(el instanceof Array){
180 for(var i = 0, len = el.length; i < len; i++){
181 this.removeElement(el[i]);
185 var index = typeof el == 'number' ? el : this.indexOf(el);
188 var d = this.elements[index];
192 d.parentNode.removeChild(d);
195 this.elements.splice(index, 1);
201 * Replaces the specified element with the passed element.
202 * @param {String/HTMLElement/Element/Number} el The id of an element, the Element itself, the index of the element in this composite
204 * @param {String/HTMLElement/Element} replacement The id of an element or the Element itself.
205 * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
206 * @return {CompositeElement} this
208 replaceElement : function(el, replacement, domReplace){
209 var index = typeof el == 'number' ? el : this.indexOf(el);
212 this.elements[index].replaceWith(replacement);
214 this.elements.splice(index, 1, Roo.get(replacement))
221 * Removes all elements.
228 Roo.CompositeElement.createCall = function(proto, fnName){
230 proto[fnName] = function(){
231 return this.invoke(fnName, arguments);
235 for(var fnName in Roo.Element.prototype){
236 if(typeof Roo.Element.prototype[fnName] == "function"){
237 Roo.CompositeElement.createCall(Roo.CompositeElement.prototype, fnName);