ExtJS equivalent of JQuery's children?

Question

Hey everyone,

I tried implementing the children function in ExtJS using select("~ *"), it just didnt work well.

I just want ExtJS to return me a set of immediate child node and ignore all the nodes under child nodes.

<div>
    <span>
        <img/>
        <img/>
    </span>
    <span>
        <img/>
        <img/>
    </span>
    <span>
        <img/>
        <img/>
    </span>
</div>

In fact I just want the number of immediate childs. If I get the select right, I can do a getCount() on the CompositeElement.

Any help will be very much appreciated.

Cheers, Mickey

Answer 1

Hi Mickey,

Perhaps you could provide a representation of the desired DOM elements that would be selected, however, if I understand your question correctly I think you want to use Ext.Element.

From Ext.CompositeElement, you have access to all of the methods from Ext.Element. Using Ext.Element.select, Ext.Element.parent, Ext.Element.query, Ext.Element.next, and so on, you should have access to whatever element you want.

See: http://www.extjs.com/deploy/dev/docs/source/Element.fx.html#cls-Ext.Element

Servus,

-bn

Answer 2

If you can id the parent, then you could do something like this to get the children:

<div id='mydiv'>
    <span>
        <img/>
        <img/>
    </span>
    <span>
        <img/>
        <img/>
    </span>
    <span>
        <img/>
        <img/>
    </span>
</div>  

Define a function like this:

    function getChildren(parentId) {
      var kids = Ext.get(parentId).select('*');
      kids = kids.filter(function(el) {
            return el.parent().id == parentId
      });
      return kids;
    }      

In your example, getChildren('mydiv').getCount() will return 3.