/**
+ * @class Ext.CompositeElementLite
+ * Flyweight composite class. Reuses the same Ext.Element for element operations.
+
+ var els = Ext.select("#some-el div.some-class");
+ // or select directly from an existing element
+ var el = Ext.get('some-el');
+ el.select('div.some-class');
+
+ els.setWidth(100); // all elements become 100 width
+ els.hide(true); // all elements fade out and hide
+ // or
+ els.setWidth(100).hide(true);
+
+ * NOTE: Although they are not listed, this class supports all of the set/update methods of Ext.Element. All Ext.Element
+ * actions will be performed on all the elements in this collection.
+ */
+Ext.CompositeElementLite = function(els, root){
+ this.elements = [];
+ this.add(els, root);
+ this.el = new Ext.Element.Flyweight();
+};
+
+Ext.CompositeElementLite.prototype = {
+ isComposite: true,
+ /**
+ * Returns the number of elements in this composite
+ * @return Number
+ */
+ getCount : function(){
+ return this.elements.length;
+ },
+ add : function(els){
+ if(els){
+ if (Ext.isArray(els)) {
+ this.elements = this.elements.concat(els);
+ } else {
+ var yels = this.elements;
+ Ext.each(els, function(e) {
+ yels.push(e);
+ });
+ }
+ }
+ return this;
+ },
+ invoke : function(fn, args){
+ var els = this.elements,
+ el = this.el;
+ Ext.each(els, function(e) {
+ el.dom = e;
+ Ext.Element.prototype[fn].apply(el, args);
+ });
+ return this;
+ },
+ /**
+ * Returns a flyweight Element of the dom element object at the specified index
+ * @param {Number} index
+ * @return {Ext.Element}
+ */
+ item : function(index){
+ var me = this;
+ if(!me.elements[index]){
+ return null;
+ }
+ me.el.dom = me.elements[index];
+ return me.el;
+ },
+
+ // fixes scope with flyweight
+ addListener : function(eventName, handler, scope, opt){
+ Ext.each(this.elements, function(e) {
+ Ext.EventManager.on(e, eventName, handler, scope || e, opt);
+ });
+ return this;
+ },
+ /**
+ * Calls the passed function passing (el, this, index) for each element in this composite. The element
+ * passed is the flyweight (shared) Ext.Element instance, so if you require a
+ * a reference to the dom node, use el.dom.
+ * @param {Function} fn The function to call
+ * @param {Object} scope (optional) The this object (defaults to the element)
+ * @return {CompositeElement} this
+ */
+ each : function(fn, scope){
+ var me = this,
+ el = me.el;
+
+ Ext.each(me.elements, function(e,i) {
+ el.dom = e;
+ return fn.call(scope || el, el, me, i);
+ });
+ return me;
+ },
+
+ /**
+ * Find the index of the passed element within the composite collection.
+ * @param el {Mixed} The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.
+ * @return Number The index of the passed Ext.Element in the composite collection, or -1 if not found.
+ */
+ indexOf : function(el){
+ return this.elements.indexOf(Ext.getDom(el));
+ },
+
+ /**
+ * Replaces the specified element with the passed element.
+ * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
+ * to replace.
+ * @param {Mixed} replacement The id of an element or the Element itself.
+ * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
+ * @return {CompositeElement} this
+ */
+ replaceElement : function(el, replacement, domReplace){
+ var index = !isNaN(el) ? el : this.indexOf(el),
+ d;
+ if(index > -1){
+ replacement = Ext.getDom(replacement);
+ if(domReplace){
+ d = this.elements[index];
+ d.parentNode.insertBefore(replacement, d);
+ Ext.removeNode(d);
+ }
+ this.elements.splice(index, 1, replacement);
+ }
+ return this;
+ },
+
+ /**
+ * Removes all elements.
+ */
+ clear : function(){
+ this.elements = [];
+ }
+};
+
+Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;
+
+(function(){
+var fnName,
+ ElProto = Ext.Element.prototype,
+ CelProto = Ext.CompositeElementLite.prototype;
+
+for(fnName in ElProto){
+ if(Ext.isFunction(ElProto[fnName])){
+ (function(fnName){
+ CelProto[fnName] = CelProto[fnName] || function(){
+ return this.invoke(fnName, arguments);
+ };
+ }).call(CelProto, fnName);
+
+ }
+}
+})();
+
+if(Ext.DomQuery){
+ Ext.Element.selectorFunction = Ext.DomQuery.select;
+}
+
+/**
+ * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
+ * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
+ * {@link Ext.CompositeElementLite CompositeElementLite} object.
+ * @param {String/Array} selector The CSS selector or an array of elements
+ * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object) Not supported in core
+ * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
+ * @return {CompositeElementLite/CompositeElement}
+ * @member Ext.Element
+ * @method select
+ */
+Ext.Element.select = function(selector, unique, root){
+ var els;
+ if(typeof selector == "string"){
+ els = Ext.Element.selectorFunction(selector, root);
+ }else if(selector.length !== undefined){
+ els = selector;
+ }else{
+ throw "Invalid selector";
+ }
+ return new Ext.CompositeElementLite(els);
+};
+/**
+ * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
+ * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
+ * {@link Ext.CompositeElementLite CompositeElementLite} object.
+ * @param {String/Array} selector The CSS selector or an array of elements
+ * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
+ * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
+ * @return {CompositeElementLite/CompositeElement}
+ * @member Ext
+ * @method select
+ */
+Ext.select = Ext.Element.select;