Loading TreeStore by dynamically setting its root property

Hi,

I am trying to load a treestore by dynamically setting its root property, below is what i am trying to do.

I am trying to load a treepanel with a treestore, which will have proxy with url: acl.json, and the structure of acl.json is like below :

Code:

response : { 
  admin: {
    expanded: true,                            children: [{
                                text: 'One',
                                expanded: true,
                                children: [{
                                    text: 'Foo',
                                    leaf: true
                                }]
                            }, {
                                text: 'Two',
                                children: []
                            }]
},
employee: {
    expanded: true,                            children: [{
                                text: 'One',
                                expanded: true,
                                children: [{
                                    text: 'Foo',
                                    leaf: true
                                }]
                            }, {
                                text: 'Two',
                                children: []
                            }]
} 
}

Now i am trying to dynamically set the root of treestore to "admin" or "employee" based on who is logged into the system, but i am not able to get to the solution.

Below is my treepanel and treestore code snippet where i am trying to set the root, on the beforeload event of treestore.

Treepanel :

Code:

items: [
        {
            xtype: 'treepanel',
            region: 'west',
            split: true,
            reference: 'menuPanel',
            itemId: 'menuPanel',
            width: 231,
            collapsed: false,
            collapsible: true,
            title: 'Navigation Bar',
            store: 'common.Menu',
            viewConfig: {
                itemId: 'treeMenu',
                rootVisible: false,
                listeners: {
                    cellclick: 'onTreeMenuCellClick'
                }
            }
        },

TreeStore:

Code:

Ext.define('MyApp.store.common.Menu', {
    extend: 'Ext.data.TreeStore',


    requires: [
        'Ext.data.field.Field',
        'Ext.data.proxy.Ajax'
    ],


    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'common.Menu',
            autoLoad: true,
            rootVisible: true,
            fields: [
                {
                    name: 'text'
                }
            ],
            listeners: {
                beforeload: {
                    fn: me.onTreeStoreBeforeLoad,
                    scope: me
                }
            },
            proxy: {
                type: 'ajax',
                url: 'app/data/acl.json'
            }
        }, cfg)]);
    },


    onTreeStoreBeforeLoad: function(store, operation, eOpts) {
        debugger;
        console.log('TreeStoreBeforeLoad');
        
            store.getProxy().setReader({
                type : 'json',
                root : "response.admin"// this root need to be set dynamically MyApp.app.loggedInUser.roles[0]
            });      


    }


});

Any kind of help is appreciated. Thanks.



Loading TreeStore by dynamically setting its root property