Results 1 to 6 of 6

Thread: How do I get child element by class name?

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    22

    Default Answered: How do I get child element by class name?

    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!

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

    If you must, you can do something like this:
    Code:
    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
    }

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132

    Default

    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.

  4. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    22

    Default

    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.

  5. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132

    Default

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

    If you must, you can do something like this:
    Code:
    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
    }

  6. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    22

    Default

    That's awesome! Thanks a lot Jerome.

  7. #6
    Sencha User
    Join Date
    May 2015
    Location
    Czech Republic
    Posts
    3

    Default

    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.
    PHP Code:
    var el Ext.get'id-of-parent' );
    var 
    classSelector '.child';
    var 
    children el.queryclassSelector );
    Ext.eachchildren, function ( child ) {
        
    // work with each child
    } ); 
    It works in extJS 3, 4 and 5

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •