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.