Как проверить / снять отметку со всех узлов панели дерева и после этого отправлять запрос на сервер только в extjs?

Question

Я новичок в extjs, и я использовал панель дерева.Я написал код для проверки и снятия флажка управления деревом.У меня есть структура дерева что-то вроде ниже.

|-Parent 1
    |- Child 1
    |- Child 2
        |- Sub child 2.1
        |- Sub child 2.2
    |- Child 3
    |- Child 4
        |- Sub child 4.1
        |- Sub child 4.2
    |- Child 5
    |- Child 6

|-Parent 2
    |- Child 1
    |- Child 2
        |- Sub child 2.1
    |- Child 3

в слушателе, я написал код для проверки и снятия отметки с узла, скажем, если все узлы выбраны и пользователь снимает отметку Sub child 2.3, то Child 2 иParent 1 и снимается, и работает нормально.

Теперь проблема в том, что когда происходит событие проверки / отмены проверки, запускается вызов БД.Я хочу сделать это как один раз, позволить ему закончить всю операцию проверки / снятия галочки, а затем сделать вызов БД в одном кадре, а не каждый раз.Я запутался, что как это сделать?ниже код для того же самого.

items: [
    Ext.create('Ext.tree.Panel', {
        checkPropagation: 'both',
        itemId: 'datasourceCustodianTree',
        rootVisible: false,
        store: {
            fields: ['value'],
            root: {
                expanded: true,
                children: treeData,
                text: 'Source:',
            }
        },
        listeners: {
            checkchange: function (node, checked, options) {
                var list1 = [], list2 = [], list3 = [];
                var tree = me.down('#datasourceTree');


                // Propagate change downwards (for all children of current node).
                var setChildrenCheckedStatus = function (current) {
                    if (current.parentNode) {
                        var parent = current.parentNode;
                        current.set('checked', parent.get('checked'));
                        suspendEvent = true;
                    }

                    if (current.hasChildNodes()) {                                                
                        current.eachChild(arguments.callee);
                    }
                };

                if (node.hasChildNodes()) {
                    node.eachChild(setChildrenCheckedStatus);                                            
                }

                // Propagate change upwards (if all siblings are the same, update parent).
                var updateParentCheckedStatus = function (current) {
                    if (current.parentNode) {
                        var parent = current.parentNode;

                        var checkedCount = 0;
                        parent.eachChild(function (n) {
                            checkedCount += (n.get('checked') ? 1 : 0);
                        });

                        // Children have same value if all of them are checked or none is checked.
                        var sameValue = (checkedCount == parent.childNodes.length) || (checkedCount == 0);

                        if (sameValue) {
                            var checkedValue = (checkedCount == parent.childNodes.length);
                            parent.set('checked', checkedValue);
                            suspendEvent = true;
                        } else {
                            // Not all of the children are checked, so uncheck the parent.
                            parent.set('checked', false);
                            suspendEvent = false;
                        }

                        updateParentCheckedStatus(parent);
                    }
                }

                updateParentCheckedStatus(node);                

                this.getChecked().forEach(function (item) {
                    if (item.data.parentId !== "root" && item.isLeaf()) {
                        if (item.data.listFor.toLowerCase() === 'item1') {
                            list1.push(item.data.value);
                        } else if (item.data.listFor.toLowerCase() === 'item2') {
                            list2.push(item.data.value);
                        } else if (item.data.listFor.toLowerCase() === 'item3') {
                            list3.push(item.data.value);
                        }
                    }
                });

                // DB Call to get data on any checkchange event.
                me.updateData(list1, list2, list3);
            }
        }
    })
]

Как выполнить такую ​​операцию?Я попытался сделать suspendEvent('checkchange'); и после него resumeEvent('checkchange').Но это не работает, поскольку это вызовет это событие только один раз.

Теперь я не знаю, что делать?

Answer 1

Я провел расследование, и проблема была в моем коде.Я использовал свойство, которое я не знал, что оно будет делать, и я удалил это свойство.Убрал это свойство и все работает отлично.checkPropagation: 'both'

Answer 2

Для этого вам не нужен трюк из extjs. Просто установите переменную управления таким образом, чтобы обработчик событий работал только после ручного действия проверки / снятия отметки.

checkchange: function(){
    if(this._suspendCheckChange){
        return;
    }
    this._suspendCheckChange = true;

    // your check/uncheck logic
    // ...

    this._suspendCheckChange = false;
}