check child nodes of a tree when a parent is clicked [ExtJS]

Question

I would like to know how can i check the sibling nodes of a tree while clicking on a particular node in ExtJs.

I had given id's for each node and i can access the id of a clicked node. then how can i proceed to checking the child nodes automatically ??

somebody please help me..

score 7 · Answer 1 · answered Feb 16 '10 at 15:39

7

// or any other way of getting hands on the node you want to work with
var node = treePanel.getNodeById('your-id');
node.eachChild(function(n) {
    n.getUI().toggleCheck(true);
});

If you want this to work on the whole subtree of the current node, you'll have to do some recursion.

A little more integrated:

treePanel.on('checkchange', function(node, checked) {
    node.eachChild(function(n) {
        n.getUI().toggleCheck(checked);
    });
});

answered Feb 16 '10 at 15:39

Stefan Gehrig

82,642
24
155
189

3

does not work in newer API versions. succeeded this http://stackoverflow.com/questions/6579769/automatically-check-uncheck-all-subtree-nodes-in-extjs-tree-when-certain-node-ge – pahan Oct 25 '11 at 07:19
That's correct. The code above is for Ext JS 3, Ext JS 4 changed the tree API quite heavily. – Stefan Gehrig Oct 25 '11 at 07:22
2

So if you don't expand the child nodes they will not load. So when you call checkchange it will only check child nodes that have been loaded. What I ended up doing was adding node.expand(true); before node.eachChild, therefore it expands all the nodes and will then check them all. – Grammin Aug 19 '13 at 15:42
I've the following error: "Maximum call stack size exceeded" – Cesar Miguel Oct 27 '14 at 20:04

score 5 · Answer 2 · answered Sep 20 '10 at 12:56

5

function nodeCheck(node) {
    node.eachChild(function(n) {
        if(n.hasChildNodes())
            nodeCheck(n)
        n.getUI().toggleCheck(false);
    });
}
var node = (tree.getSelectionModel().getSelectedNode()) ? tree.getSelectionModel().getSelectedNode() : tree.root;
if(node) nodeCheck(node);

It works well for me ;)

answered Sep 20 '10 at 12:56

slammer

51
1
1

Work fine! At least in Chrome I haven't the following error: "Maximum call stack size exceeded " =) – Cesar Miguel Oct 27 '14 at 20:05

score 2 · Answer 3 · answered Dec 30 '11 at 06:01

2

listeners:{

checkchange : function(node, checked) {
    node.parentNode.cascadeBy(function(n){n.set('checked', checked);});
}

}

answered Dec 30 '11 at 06:01

damo

849
12
16

score 1 · Answer 4 · answered Aug 30 '12 at 22:15

1

function checkChange(node, checked, Object) {
    node.cascadeBy(function(n) {
        n.set('checked', checked);
    });
}

answered Aug 30 '12 at 22:15

boooch

11
1

Some brief explanation would have been helpful. – Andrew Barber Oct 06 '12 at 01:46

score 1 · Answer 5 · edited Sep 20 '13 at 03:01

The answer of Mr C works fine(ExtJS 4.2), but a bug will occur when the childnodes of parentnode has 1 child. Here is my a little improvement. Someone can improve further

function (node, checked) {

    if (node.isLeaf()) {
        node = node.parentNode;
        var siblingStateEqual = true;
        if (node.childNodes.length == 1) {
            siblingStateEqual = checked;
        } else {
            node.cascadeBy(function (n) {
                if (n != node) {
                    if (n.get('checked') != checked) {
                        siblingStateEqual = false;
                    }
                }

            });
        }

        if (siblingStateEqual == checked) {
            node.set('checked', checked);
        }

    }
    else {
        node.cascadeBy(function (n) {
            n.set('checked', checked);
        });
    }
}

score 0 · Answer 6 · answered Sep 08 '10 at 05:13

The JSON or XML will need the "checked" property set to true or false when you populate the nodes. I am assuming that you are using an AsyncTreeNode to do this for you. If the tree nodes are created without this checked property present, ExtJS will not render it with the checkbox.

score -1 · Answer 7 · answered Feb 20 '13 at 17:31

Or, if like me, you need to automatically check/uncheck the parent node when all child leaf nodes are checked/unchecked you can try this:

function (node, checked)
{

    if (node.get('leaf'))
    {
        node = node.parentNode;
        var siblingStateEqual = true;
        node.cascadeBy(function (n)
        {
            if (n != node) {
                if (n.get('checked') != checked) {
                    siblingStateEqual = false;
                }
            }

        });

        if (siblingStateEqual == checked)
        {
            node.set('checked', checked);
        }

    }
    else
    {
        node.cascadeBy(function (n) { n.set('checked', checked); });
    }


}

check child nodes of a tree when a parent is clicked [ExtJS]

7 Answers7

Linked