CompositeElement.js
/**
* @class Ext.CompositeElement
* Standard composite class. Creates a Ext.Element for every element in the collection.
* <br><br>
* <b>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.</b>
* <br><br>
* All methods return <i>this</i> and can be chained.
<pre><code>
var els = Ext.select("#some-el div.some-class", true);
// or select directly from an existing element
var el = Ext.get('some-el');
el.select('div.some-class', true);
els.setWidth(100); // all elements become 100 width
els.hide(true); // all elements fade out and hide
// or
els.setWidth(100).hide(true);
</code></pre>
*/
Ext.CompositeElement = function(els){
this.elements = [];
this.addElements(els);
};
Ext.CompositeElement.prototype = {
isComposite: true,
addElements : function(els){
if(!els) return this;
if(typeof els == "string"){
els = Ext.Element.selectorFunction(els);
}
var yels = this.elements;
var index = yels.length-1;
for(var i = 0, len = els.length; i < len; i++) {
yels[++index] = Ext.get(els[i]);
}
return this;
},
/**
* Clears this composite and adds the elements returned by the passed selector.
* @param {String/Array} els A string CSS selector, an array of elements or an element
* @return {CompositeElement} this
*/
fill : function(els){
this.elements = [];
this.add(els);
return this;
},
/**
* Filters this composite to only elements that match the passed selector.
* @param {String} selector A string CSS selector
* @return {CompositeElement} this
*/
filter : function(selector){
var els = [];
this.each(function(el){
if(el.is(selector)){
els[els.length] = el.dom;
}
});
this.fill(els);
return this;
},
invoke : function(fn, args){
var els = this.elements;
for(var i = 0, len = els.length; i < len; i++) {
Ext.Element.prototype[fn].apply(els[i], args);
}
return this;
},
/**
* Adds elements to this composite.
* @param {String/Array} els A string CSS selector, an array of elements or an element
* @return {CompositeElement} this
*/
add : function(els){
if(typeof els == "string"){
this.addElements(Ext.Element.selectorFunction(els));
}else if(els.length !== undefined){
this.addElements(els);
}else{
this.addElements([els]);
}
return this;
},
/**
* Calls the passed function passing (el, this, index) for each element in this composite.
* @param {Function} fn The function to call
* @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
* @return {CompositeElement} this
*/
each : function(fn, scope){
var els = this.elements;
for(var i = 0, len = els.length; i < len; i++){
if(fn.call(scope || els[i], els[i], this, i) === false) {
break;
}
}
return this;
},
/**
* Returns the Element object at the specified index
* @param {Number} index
* @return {Ext.Element}
*/
item : function(index){
return this.elements[index] || null;
},
/**
* Returns the first Element
* @return {Ext.Element}
*/
first : function(){
return this.item(0);
},
/**
* Returns the last Element
* @return {Ext.Element}
*/
last : function(){
return this.item(this.elements.length-1);
},
/**
* Returns the number of elements in this composite
* @return Number
*/
getCount : function(){
return this.elements.length;
},
/**
* Returns true if this composite contains the passed element
* @return Boolean
*/
contains : function(el){
return this.indexOf(el) !== -1;
},
/**
* Returns true if this composite contains the passed element
* @return Boolean
*/
indexOf : function(el){
return this.elements.indexOf(Ext.get(el));
},
/**
* Removes the specified element(s).
* @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
* or an array of any of those.
* @param {Boolean} removeDom (optional) True to also remove the element from the document
* @return {CompositeElement} this
*/
removeElement : function(el, removeDom){
if(el instanceof Array){
for(var i = 0, len = el.length; i < len; i++){
this.removeElement(el[i]);
}
return this;
}
var index = typeof el == 'number' ? el : this.indexOf(el);
if(index !== -1){
if(removeDom){
var d = this.elements[index];
if(d.dom){
d.remove();
}else{
d.parentNode.removeChild(d);
}
}
this.elements.splice(index, 1);
}
return this;
},
/**
* Replaces the specified element with the passed element.
* @param {String/HTMLElement/Element/Number} el The id of an element, the Element itself, the index of the element in this composite
* to replace.
* @param {String/HTMLElement/Element} 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 = typeof el == 'number' ? el : this.indexOf(el);
if(index !== -1){
if(domReplace){
this.elements[index].replaceWith(replacement);
}else{
this.elements.splice(index, 1, Ext.get(replacement))
}
}
return this;
},
/**
* Removes all elements.
*/
clear : function(){
this.elements = [];
}
};
(function(){
Ext.CompositeElement.createCall = function(proto, fnName){
if(!proto[fnName]){
proto[fnName] = function(){
return this.invoke(fnName, arguments);
};
}
};
for(var fnName in Ext.Element.prototype){
if(typeof Ext.Element.prototype[fnName] == "function"){
Ext.CompositeElement.createCall(Ext.CompositeElement.prototype, fnName);
}
};
})();
/**
* @class Ext.CompositeElementLite
* @extends Ext.CompositeElement
* Flyweight composite class. Reuses the same Ext.Element for element operations.
<pre><code>
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);
</code></pre><br><br>
* <b>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.</b>
*/
Ext.CompositeElementLite = function(els){
Ext.CompositeElementLite.superclass.constructor.call(this, els);
this.el = new Ext.Element.Flyweight();
};
Ext.extend(Ext.CompositeElementLite, Ext.CompositeElement, {
addElements : function(els){
if(els){
if(els instanceof Array){
this.elements = this.elements.concat(els);
}else{
var yels = this.elements;
var index = yels.length-1;
for(var i = 0, len = els.length; i < len; i++) {
yels[++index] = els[i];
}
}
}
return this;
},
invoke : function(fn, args){
var els = this.elements;
var el = this.el;
for(var i = 0, len = els.length; i < len; i++) {
el.dom = els[i];
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){
if(!this.elements[index]){
return null;
}
this.el.dom = this.elements[index];
return this.el;
},
// fixes scope with flyweight
addListener : function(eventName, handler, scope, opt){
var els = this.elements;
for(var i = 0, len = els.length; i < len; i++) {
Ext.EventManager.on(els[i], eventName, handler, scope || els[i], opt);
}
return this;
},
/**
* Calls the passed function passing (el, this, index) for each element in this composite. <b>The element
* passed is the flyweight (shared) Ext.Element instance, so if you require a
* a reference to the dom node, use el.dom.</b>
* @param {Function} fn The function to call
* @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
* @return {CompositeElement} this
*/
each : function(fn, scope){
var els = this.elements;
var el = this.el;
for(var i = 0, len = els.length; i < len; i++){
el.dom = els[i];
if(fn.call(scope || el, el, this, i) === false){
break;
}
}
return this;
},
indexOf : function(el){
return this.elements.indexOf(Ext.getDom(el));
},
replaceElement : function(el, replacement, domReplace){
var index = typeof el == 'number' ? el : this.indexOf(el);
if(index !== -1){
replacement = Ext.getDom(replacement);
if(domReplace){
var d = this.elements[index];
d.parentNode.insertBefore(replacement, d);
d.parentNode.removeChild(d);
}
this.elements.splice(index, 1, replacement);
}
return this;
}
});
Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;
if(Ext.DomQuery){
Ext.Element.selectorFunction = Ext.DomQuery.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";
}
if(unique === true){
return new Ext.CompositeElement(els);
}else{
return new Ext.CompositeElementLite(els);
}
};
/**
* Selects elements based on the passed CSS selector to enable working on them as 1.
* @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;
Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.