EXTjs 5 Tree Nodes Double loaded

Question

I'm having a lot of trouble with the ext5 trees, so I figured I'd post here and see what you guys have noticed, and hopefully help you through these 5.0.0 bugs...

The TreeStore appears to load twice if I set it to

autoload:true

. Because of this, it somehow duplicates the nodes shown in the treepanel, causing all sorts of issues/errors...

So, in creating a work-around, I set the TreeStore to

autoload:false

and tried to just grab the store and load it, after the view was rendered. [fail]. The TreeStore loads just the one time, but the tree failed to actually render. Again, nothing was changed except having the store set to not autoload, and dropping this into the controller:

var s = Ext.getStore('myStore');
s.load();

No tree would get painted...

So, workaround number two (AWFUL solution) - let the store autoload (with the two proxy calls), but after the tree renders, remove all the data, then load the store again manually.

(in the store)
...
autoload: true
...

(in the controller)
...
var s = Ext.getStore('myStore');
s.removeAll();
s.load();
...

Shazam! The tree loaded the final time, and only has the data represented once! No duplication!!

However, now all the expanding and collapsing is broken. No events are firing, no expanding and collapsing of the nodes works.... Maybe the collapse/expand was already broken?

Set autoload:true, take out the controller code.

TreeStore loads twice; duplicate nodes in the treepanel; expand/collapse work properly.

Answer 1

I've since found a work-around, while sencha "fixes" this issue...

My Sencha Bug Report

Here's the workaround that I've just decided to put into every single store, so nothing like this happens again:

...
listeners: {        
     beforeload: function (store, operation, eOpts) {            
          if(store.isLoading()) return false;        
     }    
}
...

By adding this in, no store will ever "double load." It's just kind of ridiculous that we have to put this type of work-around in...

Good luck guys!

Answer 2

It's not the store, it's the interaction with the Tree Panel. The TreePanel has some nasty problems if the store is not loaded or loading. There are a number of bugs on the Sencha Forum about it.

The workaround I use is to create the store, load it, then insert it into the TreePanel before the load returns.

If you call load after inserting it into the TreeStore, the root node isn't correct and the store can't render.

Stopping the load from happening via the beforeload event will stop you doing partial loading of tree stores, where you expand each node as you go.

Answer 3

var MenuStore = new Ext.data.TreeStore({
    storeId: 'MenuStore',
    model: 'BaseMenu',
    autoLoad: false,
    proxy: {
          type: 'ajax',
          url: '/menu.json'
    },
    root: {
        text: 'Menu',
        id: 'src',
        expanded: true,
        loaded:true
    }
});

setting loaded : true resolve my issue.

This one work for me.