在Sencha的树盘区复选框

时间:2017-04-04 08:53:18

标签: javascript extjs sencha-touch treepanel

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

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

enter image description here

1 个答案:

答案 0 :(得分:0)

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

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