How do I get child element by class name?

[IainP]

Hi guys,

I have two questions:

1.)

How do I get the width of an element by id by going:

Ext.get('id-of-element')...? I've tried Ext.get('id-of-element').getWidth

2.)

How do I get a child element by class name?

For example if the html looked like this...

<div id="parent">
<div class="child"></div>
</div>

Thanks!

[jerome76]

I'd advise not to query an element by it's class because that may lead to ambiguity, since multiple elements can have the same css class. And Ext.get('id-of-element').getWidth() should work.

[IainP]

Hi Jerome,


Thanks for the reply.


I actually need to query an element that has no unique identifier. Hence, why I am trying to access it by using the id of its parent container and the class name of the element itself.


And Ext.get('id-of-element').getWidth() does not work.

[jerome76]

What is the Ext.get(...) returning?

If you must, you can do something like this:

var el = Ext.get('id-of-parent'),
    children = el.dom.childNodes,
    classSelector = 'my-class',
    node;
    
Ext.each(children, function(child){
    if(child.className === classSelector){
        node = child;
    }
});


if(node){
    //do what you want with the node if it is defined
}

[IainP]

That's awesome! Thanks a lot Jerome.

[Marthy]

If you want all elements with a certain class, it is easier to do the following, and it takes all the children elements, not only the immediate ones.

var el = Ext.get( 'id-of-parent' );
var classSelector = '.child';
var children = el.query( classSelector );
Ext.each( children, function ( child ) {
    // work with each child
} ); 

It works in extJS 3, 4 and 5