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 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).

• javascript
• extjs4

• And what you want to see in treepanel if it is not autoload and root is not visible too? I think you must add the code where you create store. You want AJAX loadable tree or something else? – Xupypr MV Commented Jul 27, 2011 at 13:26
• Well I will of course do a tree.store.load() when the time comes, but I don't want load to happen for every tree I use when the application loads. – Stir Zoltán Commented Jul 27, 2011 at 13:29
• Nevertheless, add code for your store. – Xupypr MV Commented Jul 27, 2011 at 13:33

7 Answers 7

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 : []
}