ExtJS 4 TreePanel autoload

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

How could I prevent autoloading on the 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: [...]
});

P.S. I've found out if I change rootVisible to true on the tree this problem doesn't happen, but then it shows to root node(which I don't want).

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

You can solve it with a small 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 need a load()

Adding to what XenoN said (though many years later when I hit the same issue) If the expanded property is set to true in the store definition, it will auto load even if autoLoad is set to false. this is unique to a TreeStore.

However, if we do want the store to load and expand we need to Set expanded = true sometimes in code after creation (when we want) this also fires the loading of the previously created store.

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

seems like after that, store.load() is redundant since the expanded = true makes the store's proxy to load up and go to the server. weird, I know.

Simplest way is setting Store's root property

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

Try with children and autoLoad : false :

root: {
    children : []
}