1. #1
    Sencha User
    Join Date
    Apr 2008
    Location
    West Linton, Scotland
    Posts
    244
    Vote Rating
    0
    andycramb is on a distinguished road

      0  

    Default Unanswered: getChildren

    Unanswered: getChildren


    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

    Code:
    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

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

  2. #2
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Answers
    9
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    See Element.select.

    Code:
    example: Ext.get('wrapper').select('div').hide();
    Ext.get('wrapper').query('div')  //a simple Array of matching DOM nodes.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3
    Sencha User
    Join Date
    Apr 2008
    Location
    West Linton, Scotland
    Posts
    244
    Vote Rating
    0
    andycramb is on a distinguished road

      0  

    Default


    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

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

  4. #4
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Answers
    9
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    Ext.Element has a variety of methods available.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  5. #5
    Sencha User
    Join Date
    Apr 2008
    Location
    West Linton, Scotland
    Posts
    244
    Vote Rating
    0
    andycramb is on a distinguished road

      0  

    Default


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

  6. #6
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243
    Vote Rating
    0
    Joe is on a distinguished road

      0  

    Default Here is a working example ...

    Here is a working example ...


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

    HTML
    HTML Code:
    <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:
    Code:
    	var el = Ext.get('wrapper');
    	el.select('div').hide();

    To add class:
    Code:
    	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
    Joseph Francis,
    CoreLan / Meeting Consultants

  7. #7
    Sencha User
    Join Date
    Apr 2008
    Location
    West Linton, Scotland
    Posts
    244
    Vote Rating
    0
    andycramb is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha User
    Join Date
    Apr 2008
    Location
    West Linton, Scotland
    Posts
    244
    Vote Rating
    0
    andycramb is on a distinguished road

      0  

    Default getting there

    getting there


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

    Code:
    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

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

  9. #9
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Answers
    1
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Wouldn't it be easier to use:
    Code:
    Ext.Element.prototype.getChildren = function(){
    	return this.select('> *');
    };

  10. #10
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243
    Vote Rating
    0
    Joe is on a distinguished road

      0  

    Default Maybe call it selectChildren ?

    Maybe call it selectChildren ?


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

    Code:
    Ext.Element.prototype.selectChildren = function(){
    	return this.select('> *');
    };
    Joseph Francis,
    CoreLan / Meeting Consultants