For up to date documentation and features, visit http://docs.sencha.com/ext-js/4-0

Sencha Documentation

This class encapsulates a collection of DOM elements, providing methods to filter members, or to perform collective actions upon the whole set.

Although they are not listed, this class supports all of the methods of Ext.core.Element and Ext.fx.Anim. The methods from these classes will be performed on all the elements in this collection.

Example:

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);
Defined By

Properties

 
The Array of DOM elements which this CompositeElement encapsulates. Read-only. This will not usually be accessed in...

The Array of DOM elements which this CompositeElement encapsulates. Read-only.

This will not usually be accessed in developers' code, but developers wishing to augment the capabilities of the CompositeElementLite class may use it when adding methods to the class.

For example to add the nextAll method to the class to add all following siblings of selected elements, the code would be

Ext.override(Ext.CompositeElementLite, {
    nextAll: function() {
        var els = this.elements, i, l = els.length, n, r = [], ri = -1;

//      Loop through all elements in this Composite, accumulating
//      an Array of all siblings.
        for (i = 0; i < l; i++) {
            for (n = els[i].nextSibling; n; n = n.nextSibling) {
                r[++ri] = n;
            }
        }

//      Add all found siblings to this Composite
        return this.add(r);
    }
});

Defined By

Methods

 
add( Mixed els, Object root) : CompositeElement

Adds elements to this Composite object.

Adds elements to this Composite object.

Parameters

  • els : Mixed

    Either an Array of DOM elements to add, or another Composite object who's elements should be added.

  • root : Object

Returns

  • CompositeElement   

    This Composite object.

 

Removes all elements.

Removes all elements.

Returns

  • void   
 

Returns true if this composite contains the passed element

Returns true if this composite contains the passed element

Parameters

  • el : Object

    {Mixed} The id of an element, or an Ext.core.Element, or an HtmlElement to find within the composite collection.

Returns

  • void   

    Boolean

 
each( Function fn, [Object scope]) : CompositeElement

Calls the passed function for each element in this composite.

Calls the passed function for each element in this composite.

Parameters

  • fn : Function

    The function to call. The function is passed the following parameters:

    • el : Element
      The current Element in the iteration. This is the flyweight (shared) Ext.core.Element instance, so if you require a a reference to the dom node, use el.dom.
    • c : Composite
      This Composite object.
    • idx : Number
      The zero-based index in the iteration.

  • scope : Object

    (optional) The scope (this reference) in which the function is executed. (defaults to the Element)

Returns

  • CompositeElement   

    this

 
fill( Mixed els) : CompositeElement

Clears this Composite and adds the elements passed.

Clears this Composite and adds the elements passed.

Parameters

  • els : Mixed

    Either an array of DOM elements, or another Composite from which to fill this Composite.

Returns

  • CompositeElement   

    this

 
filter( String/Function selector) : CompositeElement

Filters this composite to only elements that match the passed selector.

Filters this composite to only elements that match the passed selector.

Parameters

  • selector : String/Function

    A string CSS selector or a comparison function. The comparison function will be called with the following arguments:

    • el : Ext.core.Element
      The current DOM element.
    • index : Number
      The current index within the collection.

Returns

  • CompositeElement   

    this

 

Returns the first Element

Returns the first Element

Returns

  • Ext.core.Element   
 

Returns the number of elements in this Composite.

Returns the number of elements in this Composite.

Returns

  • void   

    Number

 

Find the index of the passed element within the composite collection.

Find the index of the passed element within the composite collection.

Parameters

  • el : Object

    {Mixed} The id of an element, or an Ext.core.Element, or an HtmlElement to find within the composite collection.

Returns

  • void   

    Number The index of the passed Ext.core.Element in the composite collection, or -1 if not found.

 
item( Number index) : Ext.core.Element

Returns a flyweight Element of the dom element object at the specified index

Returns a flyweight Element of the dom element object at the specified index

Parameters

  • index : Number

Returns

  • Ext.core.Element   
 

Returns the last Element

Returns the last Element

Returns

  • Ext.core.Element   
 
removeElement( Mixed el, [Boolean removeDom]) : CompositeElement

Removes the specified element(s).

Removes the specified element(s).

Parameters

  • el : Mixed

    The id of an element, the Element itself, the index of the element in this composite or an array of any of those.

  • removeDom : Boolean

    (optional) True to also remove the element from the document

Returns

  • CompositeElement   

    this

 
replaceElement( Mixed el, Mixed replacement, Boolean domReplace) : CompositeElement

Replaces the specified element with the passed element.

Replaces the specified element with the passed element.

Parameters

  • el : Mixed

    The id of an element, the Element itself, the index of the element in this composite to replace.

  • replacement : Mixed

    The id of an element or the Element itself.

  • domReplace : Boolean

    (Optional) True to remove and replace the element in the document too.

Returns

  • CompositeElement   

    this