Tree panel check box in Sencha

Question

I getting problem with sencha tree panel check box. I want to checked automatically parent node's Checkbox if I check children's node checkbox. Currently I need to check it even children node checked.

below image shows what is happening..

Answer 1

Add a listener to your column that contains the checkboxes:

columns: [
    {
        xtype: 'checkcolumn',
        listeners: {
            checkchange: 'onCheckcolumnCheckChange'
        }
    },
    // ....
]

Then use this function to check/uncheck parent node on the check event

onCheckcolumnCheckChange: function(checkcolumn, rowIndex, checked, eOpts) {
    var view = this.getView();
    var item = this.getStore().data.items[rowIndex];
    var columnName = checkcolumn.dataIndex;

    // User unchecked a row: refresh the view
    if(!checked){
        view.refresh();
        return;
    }

    // User checked a row: unselect all parents
    var parentNode = item.parentNode;
    while(typeof parentNode != 'undefined' && parentNode !== null && !parentNode.data.root){
        parentNode.set(columnName, false);
        parentNode = parentNode.parentNode;
    }

    // Then uncheck all childs (recusif)
    (function doChild(children){
        if(typeof children == 'undefined' || children === null || children.length <= 0)
            return;

        for(var i=0; i<children.length; i++){
            children[i].set(columnName, false);
            doChild(children[i].childNodes);    // <= recursivity
        }
    })(item.childNodes);

    view.refresh();
}