ExtJS 4 TreePanel Startup

Question

I have an Ext.tree.Panel which has a TreeStore . This tree is on the tab. The problem is that when my application loads all the trees used in the application, their data is loaded, even if the store is in autoLoad: false mode.

How can I prevent startup on a tree?

 Ext.define('...', { extend: 'Ext.container.Container', alias: 'widget.listcontainer', layout: { type: 'vbox', align: 'stretch' }, items: [{ xtype: 'container', html: "...", border: 0 }, { xtype: '...', flex: 1, bodyPadding: 5, margin: '9 0 0 0' }] }); Ext.define('...', { extend: 'Ext.data.TreeStore', model: '...', proxy: { type: 'ajax', reader: { type: 'json', root: 'data' }, api: { read: 'some url' } } }); Ext.define('...', { extend: 'Ext.tree.Panel', alias: 'widget....', id: '...', title: '...', height: 400, collapsible: true, useArrows: true, rootVisible: false, multiSelect: true, singleExpand: true, autoScroll: true, store: '...', columns: [...] }); 

PS I found that if I changed rootVisible to true in the tree, then this problem does not occur, but then it shows the root node (which I do not need).

Answer 1

If root invisible, the AJAX tree will automatically load the first level of the hierarchy (as you yourself have already proven).

I think the best way is to make root visible or create a tree after some action. I wrote code that prevents an AJAX request that loads data:

 var preventTreeLoad = true; store.on('beforeexpand', function(node) { if (node == this.getRootNode() && preventTreeLoad) { Ext.Ajax.abort(this.proxy.activeRequest); delete this.proxy.activeRequest; } }, store); var b = Ext.create('Ext.Button', { text: 'Click me', renderTo: 'btn', }); b.on('click', function() { preventTreeLoad = false; this.load(); }, store); 

But I do not recommend using this approach. For example, if javascript was not so fast, an Ajax request may be sent (the response will not be read, but the server will perform the operation).

Answer 2

I ran into the same problem, and to avoid an implicit request, I specified a built-in root string in the TreeStore setting, for example:

 Ext.create('Ext.data.TreeStore', { model: '...', proxy: { type: 'ajax', reader: { type: 'json', root: 'data' }, api: { read : 'some url' } folderSort: true, rootVisible: false, root: {expanded: true, text: "", "data": []} // <- Inline root }); 

After an explicit .load built-in root is overwritten.

Answer 3

You can put the dummy proxy in place when defining the tree, and then set up a real proxy server when you want to start using the tree / storage. For instance:

 var store = Ext.define('Ext.data.TreeStore', { ... // dummy proxy to avoid autoLoad on tree store construction proxy: { type: 'ajax', url: '' }, ... ); 

Then, when you want to use it for the first time,

 store.setProxy({ type: 'ajax', url: 'http://some/real/url', ... }); store.load(); 

Answer 4

You can solve it with a little override:

 Ext.override(Ext.tree.View, { setRootNode: function(node) { var me = this; me.store.setNode(node); me.node = node; if (!me.rootVisible && me.store.autoLoad) { node.expand(); } } }); 

afterlayout you will need load ()

Answer 5

The easiest way is to set the Save Root property.

 Ext.create('Ext.data.TreeStore', { .... autoLoad:false, root: { expanded: false } }); 

Answer 6

Adding to what XenoN said (although many years later when I ran into the same problem) If the extended property in the storage definition is set to true, it will load automatically even if autoLoad is set to false. It is unique to TreeStore.

However, if we want the storage to load and expand, we need to set the value Extended = true sometimes in the code after creation (when we want it), which also starts loading the previously created storage.

setting store.setRoot ({extended: true}); within the consumer store, which is Ext.tree.Panel. This will load the store when you want to load it.

After that, store.load () seems to be redundant, since extended = true causes the storage proxy to load and go to the server. weird, I know.

Answer 7

Try with children and autoLoad : false :

 root: { children : [] }