3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.CompositeElementLite
\r
9 * Flyweight composite class. Reuses the same Ext.Element for element operations.
\r
11 var els = Ext.select("#some-el div.some-class");
\r
12 // or select directly from an existing element
\r
13 var el = Ext.get('some-el');
\r
14 el.select('div.some-class');
\r
16 els.setWidth(100); // all elements become 100 width
\r
17 els.hide(true); // all elements fade out and hide
\r
19 els.setWidth(100).hide(true);
\r
20 </code></pre><br><br>
\r
21 * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Ext.Element. All Ext.Element
\r
22 * actions will be performed on all the elements in this collection.</b>
\r
24 Ext.CompositeElementLite = function(els, root){
\r
26 this.add(els, root);
\r
27 this.el = new Ext.Element.Flyweight();
\r
30 Ext.CompositeElementLite.prototype = {
\r
33 * Returns the number of elements in this composite
\r
36 getCount : function(){
\r
37 return this.elements.length;
\r
39 add : function(els){
\r
41 if (Ext.isArray(els)) {
\r
42 this.elements = this.elements.concat(els);
\r
44 var yels = this.elements;
\r
45 Ext.each(els, function(e) {
\r
52 invoke : function(fn, args){
\r
53 var els = this.elements,
\r
55 Ext.each(els, function(e) {
\r
57 Ext.Element.prototype[fn].apply(el, args);
\r
62 * Returns a flyweight Element of the dom element object at the specified index
\r
63 * @param {Number} index
\r
64 * @return {Ext.Element}
\r
66 item : function(index){
\r
68 if(!me.elements[index]){
\r
71 me.el.dom = me.elements[index];
\r
75 // fixes scope with flyweight
\r
76 addListener : function(eventName, handler, scope, opt){
\r
77 Ext.each(this.elements, function(e) {
\r
78 Ext.EventManager.on(e, eventName, handler, scope || e, opt);
\r
83 * Calls the passed function passing (el, this, index) for each element in this composite. <b>The element
\r
84 * passed is the flyweight (shared) Ext.Element instance, so if you require a
\r
85 * a reference to the dom node, use el.dom.</b>
\r
86 * @param {Function} fn The function to call
\r
87 * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
\r
88 * @return {CompositeElement} this
\r
90 each : function(fn, scope){
\r
94 Ext.each(me.elements, function(e,i) {
\r
96 return fn.call(scope || el, el, me, i);
\r
102 * Find the index of the passed element within the composite collection.
\r
103 * @param el {Mixed} The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.
\r
104 * @return Number The index of the passed Ext.Element in the composite collection, or -1 if not found.
\r
106 indexOf : function(el){
\r
107 return this.elements.indexOf(Ext.getDom(el));
\r
111 * Replaces the specified element with the passed element.
\r
112 * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
\r
114 * @param {Mixed} replacement The id of an element or the Element itself.
\r
115 * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
\r
116 * @return {CompositeElement} this
\r
118 replaceElement : function(el, replacement, domReplace){
\r
119 var index = !isNaN(el) ? el : this.indexOf(el),
\r
122 replacement = Ext.getDom(replacement);
\r
124 d = this.elements[index];
\r
125 d.parentNode.insertBefore(replacement, d);
\r
128 this.elements.splice(index, 1, replacement);
\r
134 * Removes all elements.
\r
136 clear : function(){
\r
137 this.elements = [];
\r
141 Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;
\r
145 ElProto = Ext.Element.prototype,
\r
146 CelProto = Ext.CompositeElementLite.prototype;
\r
148 for(fnName in ElProto){
\r
149 if(Ext.isFunction(ElProto[fnName])){
\r
150 (function(fnName){
\r
151 CelProto[fnName] = CelProto[fnName] || function(){
\r
152 return this.invoke(fnName, arguments);
\r
154 }).call(CelProto, fnName);
\r
161 Ext.Element.selectorFunction = Ext.DomQuery.select;
\r
165 * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
\r
166 * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
\r
167 * {@link Ext.CompositeElementLite CompositeElementLite} object.
\r
168 * @param {String/Array} selector The CSS selector or an array of elements
\r
169 * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object) <b>Not supported in core</b>
\r
170 * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
\r
171 * @return {CompositeElementLite/CompositeElement}
\r
172 * @member Ext.Element
\r
175 Ext.Element.select = function(selector, unique, root){
\r
177 if(typeof selector == "string"){
\r
178 els = Ext.Element.selectorFunction(selector, root);
\r
179 }else if(selector.length !== undefined){
\r
182 throw "Invalid selector";
\r
184 return new Ext.CompositeElementLite(els);
\r
187 * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
\r
188 * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
\r
189 * {@link Ext.CompositeElementLite CompositeElementLite} object.
\r
190 * @param {String/Array} selector The CSS selector or an array of elements
\r
191 * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
\r
192 * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
\r
193 * @return {CompositeElementLite/CompositeElement}
\r
197 Ext.select = Ext.Element.select;