Can not to implement filterBy method for TreeStore in Ext JS?

Question

I'm following this fiddle which filters TreePanel. My aim is to hide several TreeStore items depends on logged account's username.

I've used the idea of fiddle on login method of my application but now it is showing any of item! How can overcome this situation?

login: function (username, password) {
        var me = this;
        var params = {
                // Headers
                'username': username,
                'password': password,
                ...
        };

        var loginReq = {...} // Saves token with a promise function 

        if (username === 'test@useradress.com') {
            var treeStore = Ext.getStore('navMenuTree');

            //debugger; //Error raises on here but doesn't give any error on console.
            treeStore.filterBy(function (item) {
                if (item.get('root') === true) return true;
                else if (item.get('visibleModule') === 1) return true;
                else return false;
            });
        }

        return loginReq;
    },

and I've defined TreeStore as mentioned on fiddle;

Ext.define('MyApp.store.NavMenuTree', {
    extend: 'Ext.data.TreeStore',
    alias: 'store.navmenutree',

    storeId: 'navMenuTree',
    fields: [{
        name: 'text'
    }],

    root: {
        expanded: true,
        defaultRootProperty: 'data',
        visibleModule: 1, //Here it is.
        data: [
                {
                 text: 'First Menu Item', //Which should be "visible"
                 visibleModule: 1,
                 iconCls: 'x-fa fa-thumbs-up',
                 expanded: false,
                 selectable: false,         

                 data: [
                     {
                        text: translations.dashboard,
                        iconCls: 'x-fa fa-area-chart',
                        viewType: 'dash',
                        leaf: true,
                        visibleModule: 1 // As well childrens should be visible
                     },
                     {
                        text: translations.bonus,
                        iconCls: 'x-fa fa-pencil-square-o',
                        viewType: 'bonuslist',
                        leaf: true,
                        visibleModule: 1 //Here also!
                     }
                 ]
                },
                {
                 text: 'Menu Item 2', //Which should be "hide"
                 visibleModule: 2,
                 iconCls: 'x-fa fa-usd',
                 expanded: false,
                 selectable: false,

                 data: [
                    {...}
                 ]
                },

Answer 1

I've succeed to filter items through mentioned fiddle and on my own structure.

The only thing that raised the issue was storeId property of TreeStore. It was commented for a unknow reason! When it was not commented then somehow removed whole navigation menu items.

So I've commented it back and used TreeStore's own name on Ext.getStore() method. In this way fixed the issue and scenerio works perfectly;

if (username === 'test@useradress.com') {
  //Updated only this part. In my case it's Ext.getStore('NavMenuTree')
  var treeStore = Ext.getStore('NameOfTreeStore');

  treeStore.filterBy(function (item) {
    if (item.get('root') === true) return true;
    else if (item.get('visibleModule') === 1) return true;
    else return false;
  });
}

Answer 2

rootProperty definition should be in store's proxy's reader

ex:

Ext.define('MyApp.store.NavMenuTree', {
  extend: 'Ext.data.TreeStore',
  alias: 'store.navmenutree',

  storeId: 'navMenuTree',
  proxy : {
    type: 'ajax',
    reader : {
        type: 'json',
       rootProperty : 'data'
    }
  }