For a tree widget with checkbox on each tree node, the expected behaviour while the node’s checked status changes is as follows:
a. The current node is checked or unchecked.
b. If the current node is to uncheck, its parent’s node is supposed to uncheck, too.
c. If the current node is to change the status, its all its children are supposed to follow the change recursively.
d. if all the children nodes are checked, their parent node is checked as well.

Except the default behavior (a), which all javascript framework can do, the other three expected behaviours have to be done all by ourselves at all time. In this post, I am going to provide the functions that can solve the problem with ExtJs TreePanel widget. The version of Extjs I am using is 3.3.

Of course, no bother to talk about the behavior (a), let’s start from (b). If we wanna recursively uncheck the parents, we may do so like:

/**
 * Function to uncheck parent nodes if any of the child nodes is unchecked.
 *
 * @param node
 *          the selected node.
 * @param checked
 *          the checkbox status.
 * @return
 */

function recusriveCheckingParents(node, checked) {
  if(checked == false) {
    var parent = node.parentNode;
    if(parent && parent.attributes.checked == true) {
	  parent.attributes.checked = checked;
	  parent.ui.checkbox.checked = checked;
	  recusriveCheckingParents(parent,checked);
    }
  }
}

For behavior (c), If the current node is to change the status, its all its children are supposed to follow the change recursively. do the following:

/**
 * Recursive function to check the child nodes when the parent is selected.
 *
 * @param node
 *          the selected node
 * @param checked
 *          the status of checkbox
 */
function recursiveCheckingChildren(node,checked) {
	node.expand();
  if(node.hasChildNodes()) {
    var allChecked = true;
    if(checked == false) {
      node.eachChild( function(child) {
        if(!child.attributes.checked) {
          allChecked = false;
        }
      });
    }
    if(allChecked) {
	  node.eachChild( function(child) {
        child.attributes.checked = checked;
        child.ui.checkbox.checked = checked;
        recursiveCheckingChildren(child,checked);
	  });
    }
  }
}

Again, the behavior (d), d. if all the children nodes are checked, their parent node is checked as well.

/**
 * Function to check the parent node if all the children are checked.
 *
 * @param node
 *          the selected node.
 * @param checked
 *          the checkbox status
 * @return
 */

function recursiveTestingSiblingChecking(node, checked) {
  if(checked == true ) {
    var parent = node.parentNode;
    var allSilblingChecked = true;
    if(parent) {
      parent.eachChild( function(child) {
        if(child.attributes.checked == false) {
          allSilblingChecked = false;
        }
      });
      if(allSilblingChecked) {
        parent.attributes.checked = true;
        parent.ui.checkbox.checked = true;
        recursiveTestingSiblingChecking(parent,checked);
      }
    }
  }
}

All the three functions work well in most circumstances with the ExtJs tree widget. you can call them in the listener config option with “checkchange” event:

...
listeners: {
        'checkchange': function(node, checked) {
          recursiveTestingSiblingChecking(node, checked);
          recursiveCheckingChildren(node,checked);
          recusriveCheckingParents(node, checked);
          self.isValid();
        },

        'afterrender': function(tree) {
          tree.getRootNode().expand();
        }
      }
...

Now, go and run your page to see the magic.