rejectChanges in a Tree

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">

CSS

.delete {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJdSURBVDjLpZP7S1NhGMf9W7YfogSJboSEUVCY8zJ31trcps6zTI9bLGJpjp1hmkGNxVz4Q6ildtXKXzJNbJRaRmrXoeWx8tJOTWptnrNryre5YCYuI3rh+8vL+/m8PA/PkwIg5X+y5mJWrxfOUBXm91QZM6UluUmthntHqplxUml2lciF6wrmdHriI0Wx3xw2hAediLwZRWRkCPzdDswaSvGqkGCfq8VEUsEyPF1O8Qu3O7A09RbRvjuIttsRbT6HHzebsDjcB4/JgFFlNv9MnkmsEszodIIY7Oaut2OJcSF68Qx8dgv8tmqEL1gQaaARtp5A+N4NzB0lMXxon/uxbI8gIYjB9HytGYuusfiPIQcN71kjgnW6VeFOkgh3XcHLvAwMSDPohOADdYQJdF1FtLMZPmslvhZJk2ahkgRvq4HHUoWHRDqTEDDl2mDkfheiDgt8pw340/EocuClCuFvboQzb0cwIZgki4KhzlaE6w0InipbVzBfqoK/qRH94i0rgokSFeO11iBkp8EdV8cfJo0yD75aE2ZNRvSJ0lZKcBXLaUYmQrCzDT6tDN5SyRqYlWeDLZAg0H4JQ+Jt6M3atNLE10VSwQsN4Z6r0CBwqzXesHmV+BeoyAUri8EyMfi2FowXS5dhd7doo2DVII0V5BAjigP89GEVAtda8b2ehodU4rNaAW+dGfzlFkyo89GTlcrHYCLpKD+V7yeeHNzLjkp24Uu1Ed6G8/F8qjqGRzlbl2H2dzjpMg1KdwsHxOlmJ7GTeZC/nesXbeZ6c9OYnuxUc3fmBuFft/Ff8xMd0s65SXIb/gAAAABJRU5ErkJggg==');
}

JavaScript

Ext.define('BCS.overrides.data.NodeInterface', {
    override: 'Ext.data.NodeInterface',
    getPrototypeBody: function () {
        var me = this,
            protBody = me.callParent(arguments),
            removeFn = protBody.remove;

        protBody.remove = function () {
            var me = this;
            me.removedFromNode = me.parentNode;
            me.removedFromIdx = me.parentNode.indexOf(me);
            removeFn.apply(this, arguments);
        };
        return protBody;
    }
});

/**
 * This is an undocumented file.
 * @author Johan Vandeplas
 */
Ext.define('BCS.overrides.data.TreeStore', {
    override: 'Ext.data.TreeStore',

    /**
     * removes node or an array of nodes from its parent.
     * @param {Ext.data.NodeInterface/[Ext.data.NodeInterface]}nodes
     * @param {Boolean} [destroy=false] True to destroy the node upon removal.
     */
    remove: function (nodes, destroy) {
        nodes = Ext.isArray(nodes) ? nodes : [nodes];
        Ext.each(nodes, function (node) {
            node.remove(destroy === true);
        });
    },
    /**
     * @returns {Array}
     */
    getRejectRecords: function () {
        return Ext.Array.push(this.getNewRecords(), this.getUpdatedRecords(), this.getRemovedRecords());
    },
    /**
     * brings the store to previous state (rejects all uncommitted changes)
     */
    rejectChanges: function () {
        var me = this,
            recs = me.getRejectRecords(),
            len = recs.length,
            i = 0,
            rec;

        for (; i < len; i++) {
            rec = recs[i];
            rec.reject();
            if (rec.phantom) {
                me.remove(rec);
            }
        }

        // Restore removed records back to their original positions
        recs = me.removed;
        len = recs.length;
        for (i = len - 1; i >= 0; i--) {
            rec = recs[i];
            rec.removedFromNode.insertChild(rec.removedFromIdx, rec);
            delete rec.removedFromNode;
     ...