javascript - Sencha 中的树面板复选框

Question

我遇到了 Sencha 树面板复选框的问题。如果我选中子节点复选框，我想自动选中父节点的复选框。目前我需要检查它，甚至检查子节点。

下图显示了正在发生的事情..

Answer 1

向包含复选框的列添加监听器:

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

然后使用此函数在检查事件上检查/取消检查父节点

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