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.

Answer 1

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

Answer 2

i don't know why "autoLoad: false;" does not work. but you can prevent autoloading as adding 'root' config in treepanel. not in treestore. and also load() works correctly.

{
    xtype: 'treepanel',

    .....

    root: {
        loaded: true;
    }
}

this will work.

var myTreeStore = Ext.create('Ext.data.TreeStore', {
    fields: [ ... ],

    proxy: { ... },

    root: {
        loaded: true;
    }
});

this will not work.

good luck.