在ExtJs 4.1 Checkbox TreePanel中触发父节点的检查更改事件

时间:2013-08-05 14:36:44

标签: extjs extjs4.1

我有一个简单的ExtJS 4.1复选框TreePanel。树是建立在简单逻辑上的。

  1. 如果选择任何节点的所有子节点,请取消选择所有子节点并选择父节点。
  2. 如果选择父节点,请取消选择所有子节点。
  3. 请使用以下小提琴嘲笑上述要求。 Example via fiddle

    Ext.create('Ext.tree.Panel', {
        title: 'Simple Tree',
        renderTo: Ext.getBody(),
        width: 400,
        height: 400,
        store: {
            root: {
                expanded: true,
                children: [{
                    checked: false,
                    text: "1 detention",
                    expanded: true,
                    children: [{
                        checked: false,
                        text: '1.1 foo',
                        leaf: false,
                        children: [{
                            checked: false,
                            text: "1.1.1 India",
                            expanded: true
                        }, {
                            checked: false,
                            text: "1.1.2 Singapore",
                            expanded: true
                        }, {
                            checked: false,
                            text: "1.1.3 USA",
                            expanded: true
                        }]
                    }, {
                        checked: false,
                        text: '1.2 bar',
                        leaf: true
                    }]
                }, {
                    checked: false,
                    text: "2 homework",
                    expanded: true,
                    children: [{
                        checked: false,
                        text: "2.1 book report",
                        leaf: true
                    }, {
                        checked: false,
                        text: "2.2 algebra",
                        expanded: true,
                        children: [{
                            checked: false,
                            text: "2.2.1 buy lottery tickets",
                            leaf: true
                        }, {
                            checked: false,
                            text: "2.2.2 buy lottery tickets 2",
                            leaf: true
                        }]
                    }, {
                        checked: false,
                        text: "2.3 English report",
                        leaf: true
                    }]
                }, {
                    checked: false,
                    text: "3 buy lottery tickets",
                    leaf: true
                }]
            }
        },
        rootVisible: false,
        disableSelection: true,
        //selModel: {mode: 'SIMPLE'},
        listeners: {
            checkchange: function (record, checked, opts) {
                if (!checked) return;
                var parentNode = record.parentNode;
    
                // Deselect children
                function deselectChildren(record) {
                    record.eachChild(function (record) {
                        record.set('checked', false);
                        deselectChildren(record);
                    });
                }
                deselectChildren(record);
    
                // See if all siblings are selected now
                var allSiblingSelected = false;
                if (parentNode) {
                    allSiblingSelected = parentNode.childNodes.reduce(function (previous, node) {
                        return previous && node.get('checked');
                    }, true);
                }
    
                if (allSiblingSelected) {
                    parentNode.set('checked', true);
                    // Apparently won't fire on its own. Below line creates problem
                    this.fireEvent('checkchange', parentNode, true, opts);
                }
    
                // Deselect ancestors
                else {
                    while (parentNode) {
                        parentNode.set('checked', false);
                        parentNode = parentNode.parentNode;
                    }
                }
            }
        }
    });
    

    当您看到代码时,您将看到当选择节点的所有兄弟节点时,我手动将父节点的'checked'配置设置为true,然后在第96行手动触发checkchange事件父节点将取消选择所有子节点。

    问题:有时,此事件不会被触发,并且树会产生不一致的结果。如果我放入调试点或使用console.log,系统每次都会触发此事件。

    我观察到的有趣的事情是,当您调试代码或使用console.log编写一些调试信息时,系统将正常工作。我假设某些checkchange事件在我使用fireEvent手动触发的时候没有被触发。

    当我为父节点设置'checked'配置或者我可以使用任何其他方法时,我有什么选项可以自动触发checkchange事件。

    请帮忙

    谢谢

0 个答案:

没有答案