check childnodes in tree

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">

JavaScript

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",
                expanded: true,
                children: [{
                    text: "sharpen pencil",
                    leaf: true,
                    checked: false
                }, {
                    text: "make equation",
                    leaf: true,
                    checked: false
                }],
                checked: false
            }

            ],
            checked: false
        }, {
            text: "buy lottery tickets",
            leaf: true,
            checked: false
        }]
    }
});



Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 400,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody(),
    listeners: {
        checkchange: function (node, checked, eOpts) {
            //scenario 1:
            var setParentsChecked = function (parentNode) {
                parentNode.set('checked', true);
                if (parentNode.parentNode !== null) setParentsChecked(parentNode.parentNode);
            }
            if (node.get('checked') && node.parentNode !== null) setParentsChecked(node.parentNode);

            //scenario 2:
            if(checked && node.hasChildNodes()){
                node.eachChild(function(childNode){
                    childNode.set('checked', !checked);
                });
            }

        }
    }

});