uncheck parent node when children node is not all checked

Question

I am newbie extJs user. I have using tree panel with checkbox and i want to uncheck the parent node when the children node is not all checked. below is my code, hope you can help me guys, i dont know what to do here.

the structure of my treepanel is something like this:

• parentnode1
  • sub-parentNode1.1
    • child1.1
    • child1.2
    • child1.3
  • subparentNode1.2
    • child2.1
    • child2.2
• parentnode2
  • subparentNode2.1
    • child2.1.1

var treeCheck = new Ext.tree.TreePanel({
    //some code here
});

//event here

treeCheck.on('checkchange', function(node, checked) {
    if(node.hasChildNodes()==true) {

        node.eachChild(function(n) {
            n.getUI().toggleCheck(checked);
        });

    } else {

        if(!checked) {
            var _parentNode = node.parentNode;
            //i dont know what to do here...
            //specifically, i want to uncheck the parent node and subparent node
            //when the children/child node is unchecked
        }
    }
});

Answer 1

Had the same issue. Fixed it by adding this event handler:

treePanel.on('checkchange', function(node, isChecked) {

    // Propagate change downwards (for all children of current node).
    var setChildrenCheckedStatus = function (current) {
        if (current.parentNode) {
            var parent = current.parentNode;
            current.set('checked', parent.get('checked'));
        }

        if (current.hasChildNodes()) {
            current.eachChild(arguments.callee);
        }
    };
    if (node.hasChildNodes()) {
        node.eachChild(setChildrenCheckedStatus);
    }

    // Propagate change upwards (if all siblings are the same, update parent).
    var updateParentCheckedStatus = function (current) {
        if (current.parentNode) {
            var parent = current.parentNode;

            var checkedCount = 0;
            parent.eachChild(function(n) {
                checkedCount += (n.get('checked') ? 1 : 0);
            });

            // Children have same value if all of them are checked or none is checked.
            var sameValue = (checkedCount == parent.childNodes.length) || (checkedCount == 0);

            if (sameValue) {
                var checkedValue = (checkedCount == parent.childNodes.length);
                parent.set('checked', checkedValue);
            } else {
                // Not all of the children are checked, so uncheck the parent.
                parent.set('checked', false);
            }

            updateParentCheckedStatus(parent);
        }
    }
    updateParentCheckedStatus(node);
});

Works both ways, downwards (check all children of a node) and upwards (uncheck parent nodes if a node is unchecked) in a recursive manner.

Answer 2

if(!checked)
{
    //To uncheck the child nodes (I think you didn't ask this)
    /*for(var i in node.childNodes)
        node.childNodes[i].set('checked', false);
    */
    //To unchek the parent node
    node.parentNode.set('checked', false);
    node.parentNode.parentNode.set('checked', false);
}

Note: I tested it and found that it is not recursive.

From node.parentNode.set('checked', false) only it should have unchecked the grand-parent.

Answer 3

Just for completeness, for this kind of recursion, ExtJS 3.4 has respectively Ext.tree.Node methods cascade and bubble.

        listeners: {
        'checkchange': function(node, checked){

                var checkChange = function(currentNode, flag) {
                    try{
                        currentNode.attributes.checked  = flag;
                        currentNode.ui.checkbox.checked = flag;
                    }
                    catch(e){
                        // just avoiding error when node has no such attribute
                    }
                };

                /**
                 * Cascades down the tree from this node propagating the 'checkChange' event.
                 */
                 node.cascade(function() {
                    if(this.expanded === false){
                        this.expand(true);
                    }

                    checkChange(this, checked);

                    return true;
                });

                /**
                 * Bubbles up the tree from this node changing parent's state depending on children.
                 */
                node.bubble(function() {
                    if(this.hasChildNodes()){

                        var checkedCount = 0;

                        this.eachChild(function(child) {
                            checkedCount += (child.attributes.checked ? 1 : 0);
                        });

                        var checkedValue = (checkedCount == this.childNodes.length) && checkedCount !== 0;

                        checkChange(this, checkedValue);
                    }
                });
         }
     },

A completely functional fiddle can be found here.

Obs: logic for bubble was borrowed from ag0rex