CODEWITHSUNDEEP
javascriptextjsextjs6extjs6-classic
Stats4224
Stats4224

Reputation: 808

ExtJS 6.2 Update TreeGrid data from store without reloading from server

I have have two tree grids that share the same store. When I drag an item from one to the other all the proper updates seem to happen (Record disappears from location on left tree, places on right tree, left tree now also shows the new placement).

However, If I try to drag the same record back to its original spot, it appears that it's parent never updated to say that it left.

Here is where I am checking if I can drop an item:

listeners: {
            nodedragover: function(targetNode, position, dragData, e, eOpts) {
        console.log("Trying to drop");
        var ruleStore = this.getStore('rules');

        // Ensure leaf is adding as a leaf
        if (position === 'before') {
            return false;
        }

        // Check first that the target is a pool and not a leaf
        if (targetNode.data.leaf) {
            console.log("A leaf! Can't drop here")
            return false;
        } else {
            console.log("A node! Drop it like it's hot");
        }

        var allowDrop = true;
        var dropMessage = [];

        var records = dragData.records;
        var targetPool = targetNode.data;
        console.log("Dragdata: ", dragData);
        console.log("targetPool: ", targetPool);
        console.log("Store: ", Ext.getStore('Pools'));

        // Check platform, sample names, indicies
        for (var i = 0; i < records.length; i++) {
            var rec = records[i].data;
            if (rec.platform !== targetPool.platform) {
                allowDrop = false;
                dropMessage.push("Sample platform does not match target pool platform");
                break;
            } else if (targetPool.children.map(
                function(child){ return child.sample_name;}).indexOf(rec.sample_name) > -1) {
                allowDrop = false;
                dropMessage.push("Sample is already in this pool");
                break;
            } else if (targetPool.children.map(
                function(child){ return child.sample_index;}).indexOf(rec.sample_index) > -1) {
                allowDrop = false;
                dropMessage.push("Sample index is already in this pool");
                break;
            }
        }
        console.log(dropMessage);
        return allowDrop;
    },

When I get the store with Ext.getStore('Pools'), it reflects that the item was removed from it's old parent and is now on the new parent. However, the targetNode from the nodedragover event still has the old state.

How can I get the tree view to reflect the store, but without making the store reload from the server (this should all be done client side)?

I feel that I am missing some fundamental concept here.

Upvotes: 0

Views: 727

Answers (1)

LellisMoon
LellisMoon

Reputation: 5020

You can use 

treeView.refresh();

or

treeView.refreshNode(recordModified);

because tree view is extended from view.table Here the docs http://docs.sencha.com/extjs/6.0.2/classic/Ext.view.Table.html#method-refresh

Upvotes: 1

Related Questions