getChildren

[andycramb]

I was looking to see if there is a method that can pull back all the children of an element
I cannot see anything that does this at the moment
So from the html below I want to get all the divs under the wrapper div from something like this

Ext.get('wrapper').getChildren()

Can I /should I poke this into the Ext.Element prototype?
Is there any existing methods I can use to achieve this
I am kinda lost in between Ext,Ext.Element, Ext.DomQuery
Any help is much appreciated

<div id="wrapper">
     <div id="child1></div>
     <div id="child2></div>
     <div id="child3></div>
     <div id="child4></div>
</div>

[hendricd]

See Element.select.

example: Ext.get('wrapper').select('div').hide();
Ext.get('wrapper').query('div')  //a simple Array of matching DOM nodes.

[andycramb]

Thanks for your help
I maybe should have explained that I was thinking that I may not know the tag name, the id or class so would want something that could return a composite element based on structure
and then I could chain other methods for example

Ext.get('wrapper).getChildren().hide();

[hendricd]

Ext.Element has a variety of methods available.

[andycramb]

Thanks but I have been looking at the Element class for a while now without a light bulb moment

[Joe]

A working example says 1000 works .. so here you go ...

HTML

<style>
.cool-looking {
   color:red;
}
</style>
<div id="wrapper">
     <div id="child1">1</div>
     <div id="child2">2</div>
     <div id="child3">3</div>
     <div id="child4">4</div>
</div>

Using select ...
Creates a Ext.CompositeElement for child nodes based on the passed CSS selector (the selector should not contain an id).

You can then treat this composite element just like you would an element as shown below.

To hide:

	var el = Ext.get('wrapper');
	el.select('div').hide();

To add class:

	var el = Ext.get('wrapper');
	el.select('div').addClass('cool-looking');

Or you can use query and get back an array as detailed by hendricd earlier.

Hope that helps

[andycramb]

Thanks Joe for the help as well

What I am trying to achieve is port over a MooTools sliding tab extension in to ExtJs core
I have an early prototype how it works using MooTools at the moment on my site to give you an idea of what I am trying to do. I am at the moment trying to do write an extension for Ext Core

I was looking for the child sections to be configurable so it maybe divs,uls or even tables. It would be up to the user implementing the structure to decide what there html would be
The extension I hope to write would not care what tags/html that was used, but would just get all the children under the wrapper div. It would be flexible enough to accommodate any tags as long as they were children of the wrapper div
So when I called getChildren it could return all child elements

I understand what yourself and hendricd have all already posted but I am looking for some more flexibility and I was also hoping to pick up how to add methods to Ext.Element and therefore understand some more about the Core while I was at it

Hope that makes sense
Thanks to both of you for your help

[andycramb]

I am nudging closer to what I was looking for
I have got the basics up and running by doing this

Ext.Element.prototype.getChildren = function(){
            
        mycomp = new Ext.CompositeElementLite();      

        Ext.each(this.dom.childNodes, function(v) {
            if(v.nodeType == 1) {        
                mycomp.add(this);
            }
        });
        return mycomp;
};

This allows me to do the code below which gets all child HTML elements

Ext.get('wrapper').getChildren();

[Condor]

Wouldn't it be easier to use:

Ext.Element.prototype.getChildren = function(){
	return this.select('> *');
};

[Joe]

Since select normally returns the CompositeElementLite, I suggest a rename..

Ext.Element.prototype.selectChildren = function(){
	return this.select('> *');
};