ExtJS 4 TreePanel autoload

I hit the same problem, and to avoid an implicit request, I specified a root inline in the TreeStore's configuration, like:

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 the inline root is overwritten.


If root is invisible then AJAX tree will automatically load first level of hierarchy (as you already proved by yourself).

I think the best way is to make root visible or create tree after some actions. I wrote code that prevent 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'm not recommended to use this approach. For example, if javascript wasn't so fast - Ajax request may be send (response will not be read but server will execute operation).


You can put a dummy proxy in place when defining the tree, then set the real proxy when you want to begin using the tree/store. For example:

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();