I am new to extjs
and I have used tree panel. I have written code for checking and unchecking the checkbox of tree control. I have structure of tree something like below.
|-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
in listener, I have written code for checking and unchecking the node, lets say If all nodes are selected and user uncheck Sub child 2.3
then Child 2
and Parent 1
both gets uncheck and that is working fine.
Now the problem is evertime this check/uncheck event happens, it fires a DB Call. I want to make it like once let it finish all the check/uncheck operation and then make a db call in single shot instead of every time. I am confused that how to make it happen? below is the code for the same.
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);
}
}
})
]
How to pefrom such operation? I have tried to make suspendEvent('checkchange');
and after it resumeEvent('checkchange')
. But that is not working as it will call this event only once.
Now I am clueless, what to do?
I have investigate and issue was in my code. I have used a property which I was unaware that what it will do and I have removed that property. Removed this property and everything works fine. checkPropagation: 'both'