Code:
Ext.override(Ext.data.TreeStore, {
onNodeRemove: function(parent, node, isMove) {
var me = this,
removed = me.removed;
if (!node.isReplace && Ext.Array.indexOf(removed, node) == -1) {
removed.push(node);
}
if (me.autoSync && !me.autoSyncSuspended && !isMove) {
me.sync();
}
},
rejectDeleted: function() {
var me = this,
removed = me.removed,
rootNode = me.getRootNode(),
length = removed.length;
removed.reverse();
for (var i = 0; i < length; i++) {
node = removed[0];
parentNode = node.parentNode;
isParentNode = rootNode.findChildBy(function(){
if (this.internalId == parentNode.internalId)
return true;
});
index = node.data.index;
if (!isParentNode) {
console.log(node, index);
rootNode.insertChild(index, node);
} else {
console.log(node, index);
parentNode.insertChild(index, node);
}
}
}
});
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ id: 1, text: "detention", leaf: true, index: 0 },
{ id: 2, text: "homework", index: 1, expanded: true, children: [
{ id: 3, text: "book report", leaf: true, index: 0 },
{ id: 4, text: "alegrbra", leaf: true, index: 1 }
] },
{ id: 5, text: "buy lottery tickets", leaf: true, index: 2 }
]
}
});
var tp = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
Ext.create('Ext.Button', {
text: 'Delete',
renderTo: Ext.getBody(),
handler: function() {
var sn = tp.getSelectionModel().getSelection();
sn[0].remove()
store.rejectDeleted();
tp.getView().refresh()
Ext.each(tp.getRootNode().childNodes, function(node) {
console.log('ID: ' + node.data.id)
console.log('TEXT: ' + node.data.text)
console.log('INDEX: ' + node.data.index)
});
}
});
What we will get after we click on Delete button? Everything what we expected except when we click on homework node.