Results 1 to 9 of 9

Thread: TreePanel childeen nodes access

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

    Default TreePanel childeen nodes access

    Hi,

    I have a TreePanel which I fill by setting children to its root:
    Code:
    root: {
                nodeType: "async",
                expanded : true,
                children: [{
                        text: 'Child 1',
                        checked: true,
                        draggable: false,
                        leaf: false,
                        expanded: true,
                        singleClickExpand: true,
                        children: [{
                            text: 'Child 1.1',
                            draggable: true,
                            checked: true,
                            leaf: true
                      } ...
    When I try to reach the tree children by
    Code:
    tree.root.firstChild;
    I get a null object.
    The same thing with
    Code:
    tree.root.ChildNodes
    However, the method
    Code:
    tree.root.hasChildNodes()
    returns true.
    Do you have an explanation?

    Regards

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    What is your "tree" variable? Is it the ext component, or just the dom element?

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    31

    Default

    It's a Ext.tree.TreePanel

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    31

    Default

    Here is my tree :
    Code:
        tree = new Ext.tree.TreePanel({
            useArrows: true,
            animate: true,
            title: "Couches",
            enableDD: true,
            loader: new Ext.tree.TreeLoader(),
            root: {
                nodeType: "async",
                expanded : true,
                children: [{
                        text: 'Fond de plan',
                        checked: true,
                        draggable: false,
                        leaf: false,
                        expanded: true,
                        singleClickExpand: true,
                        children: [{
                            text: 'Open Street Map',
                            draggable: true,
                            checked: true,
                            leaf: true,
                            listeners:{
                                'checkchange': function(node, checked){
                                        osm.setVisibility(checked);
                                }
                            }
                        },
                        {
                            text: 'Google Streets',
                            draggable: true,
                            checked: true,
                            leaf: true,
                            listeners:{
                                'checkchange': function(node, checked){
                                        googleStreets.setVisibility(checked);
                                }
                            }
                        },
                        {
                            text: 'Google Satellite',
                            draggable: true,
                            checked: true,
                            leaf: true,
                            listeners:{
                                'checkchange': function(node, checked){
                                        googleSatellite.setVisibility(checked);
                                }
                            }
                        }]
                        ,listeners:{
                            'checkchange': function(node, checked){
                                node.eachChild(function(n) {
                                    n.getUI().toggleCheck(checked);
                                });
                            }
                        }
                    },
                    {
                        text: 'Mtier',
                        checked: true,
                        draggable: false,
                        leaf: false,
                        expanded: true,
                        singleClickExpand: true,
                        children: [{
                            text: 'Dpartements administratifs',
                            draggable: true,
                            checked: true,
                            leaf: true,
                            listeners:{
                                'checkchange': function(node, checked){
                                        wms.setVisibility(checked);
                                }
                            }
                        }]
                        ,listeners:{
                            'checkchange': function(node, checked){
                                node.eachChild(function(n) {
                                    n.getUI().toggleCheck(checked);
                                });
                            }
                        }
                    },
                    {
                        text: 'Annotations',
                        checked: true,
                        draggable: false,
                        leaf: false,
                        expanded: true,
                        singleClickExpand: true,
                        children: [
                            {
                                text: 'Vecteurs',
                                checked: true,
                                draggable: true,
                                leaf: true,
                                listeners:{
                                    'checkchange': function(node, checked){
                                        vectors.setVisibility(checked);
                                    }
                                }
                            },
                            {
                                id: 'text',
                                text: 'Textes',
                                checked: true,
                                draggable: true,
                                leaf: true,
                                listeners:{
                                    'checkchange': function(node, checked){
                                        if (checked) {
                                            for ( var j = 0; j < popups.length; j++)
                                                    popups[j].show();
                                        } else {
                                            for ( var j = 0; j < popups.length; j++)
                                                    popups[j].hide();
                                        }
                                    }
                                }
                            }
                        ]
                        ,listeners:{
                            'checkchange': function(node, checked){
                                node.eachChild(function(n) {
                                    n.getUI().toggleCheck(checked);
                                });
                            }
                        }
                    }
                ]
            },
            border: true,
            region: "south",
            height: 300,
            split: true,
            autoScroll: true,
            containerScroll: true,
            rootVisible: false,
            lines: false
        });

  5. #5
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    ".firstChild" and ".ChildNodes" are not valid methods for the tree node, whereas "hasChildNodes()" is:
    http://docs.sencha.com/ext-js/3-4/#!...-hasChildNodes

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    31

    Default

    firstChild and ChildNodes are properties of a TreeNode so
    tree.root.ChildNodes

    should work normally and return an array of child nodes.

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    Hmmm, not sure what your issue might be, as they seem to be working correctly in this example:
    http://jsfiddle.net/mgDqG/

    I admit that I'm not 100% familiar with the usage of trees in ext, but I do however notice that you build your root differently compared to the example and ext documentation (using nodeType: async?).

  8. #8
    Sencha User
    Join Date
    Oct 2012
    Posts
    31

    Default

    Thank you very much for the example.
    The problem was the tree.getRootNode().expand(); command that has to be performed after the tree is created.

  9. #9
    Sencha User
    Join Date
    Oct 2012
    Posts
    31

    Default

    One other issur with this tree!
    tree.getRootNode().firstChild.firstChild.getUI()
    works fine and returns the child UI.
    but
    tree.getRootNode().firstChild.firstChild.getUI().getAnchor()
    returns undefined. The same happens with: getEl()
    while
    tree.getRootNode().firstChild.firstChild.getUI().hide()
    works and hides the node
    and
    tree.getRootNode().firstChild.firstChild.getUI().isChecked()
    works but returns a wrong value. It returns false while the node is checked.

    Any explanation to that?

Posting Permissions

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