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.

you give a reference of an extjs 1.0 example are you using Ext4.2 like the tag sais? — VDP, Jan 24 '14 at 11:46
yes,I am using ExtJs4.2.I have provided the link for reference. — Dev, Jan 24 '14 at 11:47

score 7 · Accepted Answer · answered Jan 24 '14 at 13:25

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.

Glad you could find it. I found something similar for scenario 1 but didn't came around to scenario 2 ( had a 3 hour scrum meeting :( ) — VDP, Jan 24 '14 at 15:54

score 4 · Answer 2 · answered Jan 24 '14 at 12:08

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);
                });
            }
        }
    }

});

Thanks for your effort @VDP.But it is not working the way I want.Its totally contradicting Scenario1 and Scenario2 which is what I want. According to your solution,on selection of parentNode its children are getting selected.Thnks again. — Dev, Jan 24 '14 at 12:37
sorry I was a little quick :) didn't read it well.. but it shouldn't be hard to implement those scenario's if you know you can do it in the checkchange. I'll do my best to update my answer in a couple of minutes :) — VDP, Jan 24 '14 at 12:42

Check and uncheck nodes in treepanel

2 Answers2