Check and uncheck nodes in treepanel

Question

To do : Checking a child should check parents up the tree, and clearing a parent checkbox should clear all of it's children.

Example :

parent1
--child1
--child2
     --subChild1
     --subChild2

Scenario1 :In above case, if subChild1 is checked,then parent1 and child2 should also be checked.

Scenario2 :If parent1 is checked,then all its children(checked) should be unchecked.

From this Check/Uncheck Nodes,only when a parent node is selected its child node are getting selected.

Their is something implemeted the way I want,but not able to figure it out(implementation) as the complexity level is high enough for me to understand.Here is it reference

Please help me resolve this functionality.Thanks.Any help would be appreciated.

Answer 1

Here is what I have done.It took some time but it worked.

checkchange : function(node, checked, opts) {

 function clearNodeSelection(node){
  //node is not leaf node
   console.log(node);
   leafNode = node.raw.leaf;
   if(!leafNode){
      node.cascadeBy(function(node) {
            node.set('checked', false);
       })
   }
 }

 if(!checked){
    console.log("inside !checked : "+checked);
    clearNodeSelection(node);
 }

 function selectParentNodes(node){
     var parentNode = node.parentNode;
     if(parentNode){
        parentNode.set('checked', true);
        selectParentNodes(parentNode);
    }
 }

 selectParentNodes(node);
}

Atlast,Thanks @VDP. 'SO' is awesome.

Answer 2

Here ya go! Working fiddle

=> You add a listener for checkchange, check if it has childNodes if so set the value on the childNodes

Note: Check the data has the checked: false parameter to enable the checkboxes. (if not sent by the back-end you can force it by adding it to your model and setting it as default)

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: "detention", leaf: true, checked: false },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true, checked: false },
                { text: "algebra", leaf: true, checked: false}
            ], checked: false },
            { text: "buy lottery tickets", leaf: true, checked: false }
        ]
    }
});

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody(),
    listeners: {
        checkchange: function( node, checked, eOpts ){
            if(node.hasChildNodes()){
                node.eachChild(function(childNode){
                    childNode.set('checked', checked);
                });
            }
        }
    }

});