Extjs 4.2.1 - config autoLoad:false Fails

Question

I define a treepanel extend extend: 'Ext.tree.Panel' and that has initComponent function like

 Ext.define('Example', {
    extend: 'Ext.tree.Panel',
    title: 'Example',
    useArrows:false, 
    rootVisible: false,
    border: false,
    initComponent: function () {
        var store = Ext.create('Ext.data.TreeStore', {
            fields: [
                {name: 'id',     type: 'string'},
                {name: 'text',     type: 'string'}
            ],
            autoLoad : false, // not working
            proxy: {
                type: 'ajax',
                url: 'data.php',
                reader: {
                    type: 'json',
                    root: 'results'     
                }
            }

        });
        this.store = store;
        this.callParent(arguments);
    }
 });

I try to set autoLoad: false but that always loading when i create my treepanel

When i try to config below code to store then autoLoad: false working but my treepanel after load is blank

                root: {
                    text: 'Ext JS',
                    id: 'src',
                    expanded: false // this 
                }

my json is good and working if not using root config like

({  "results": [
    { 
        id : '1' , 
        text : '1', 
        expanded: true, 
        results :[{ 
            id : '2' , 
            text : '2', 
            leaf:true
        }]
    },{ 
        id : '3' , 
        text : '3', 
        leaf:true
    }] 
})

How to fix that thanks.

The autoLoad property is only bound to the store itself. I guess in your case a component triggers the load. If you want full control you can check every load with the beforeload event and return false if it is not valid — sra
@sra How to check if not valid, what do u mean? But why my code fails, autoLoad : false is not working :( — DeLe
Please reffer to the docs for autoLoad Note that if true the store will load after it is created. Create just the store without the treepanel and you will see that your store don't load after creation. — sra
@sra if using beforeload i think that's hard to catch. i using root: { results: [] } in store then autoLoad: false working but when i load() my treepanel is blank? — DeLe

Viacheslav Dobromyslov Viacheslav Dobromyslov · Accepted Answer · 2013-10-14T23:31:14

You have to override Ext.tree.Panel.setRootNode metod to take store's autoLoad property into account.

The following example is tested with ExtJS v4.2.2.

Ext.define('Example', {
    extend: 'Ext.tree.Panel',
    title: 'Example',
    useArrows:false,
    rootVisible: false,
    border: false,

    /**
     * Override.
     */
    setRootNode: function() {
        if (this.getStore().autoLoad) {
            this.callParent(arguments);
        }
    },

    initComponent: function () {
        var store = Ext.create('Ext.data.TreeStore', {
            fields: [
                {name: 'id',     type: 'string'},
                {name: 'text',     type: 'string'}
            ],
            autoLoad : false,
            proxy: {
                type: 'ajax',
                url: '/data.php',
                reader: {
                    type: 'json',
                    root: 'results'
                }
            }

        });
        this.store = store;
        this.callParent(arguments);
    }
});

Ext.onReady(function(){

    var tree = Ext.create('Example', {
        renderTo: Ext.getBody(),
        width: 300,
        height: 300
    });

    tree.getStore().load();
});

Extjs 4.2.1 - config autoLoad:false Fails

3 Answers