Ext JS 中TreeStore 不能实现filterBy 方法吗？

Question

我正在关注过滤 TreePanel 的 fiddle。我的目标是根据登录帐户的 username 隐藏几个 TreeStore 项。

我在我的应用程序的 login 方法中使用了 fiddle 的想法，但现在它显示了任何项目！如何克服这种情况？

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;
    },

并且我已经定义了 fiddle;

中提到的 TreeStore

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

rootProperty 定义应该在商店的代理中 reader

例如：

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

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

Answer 2

我已经成功地通过提到的 fiddle 和我自己的结构过滤了项目。

唯一提出问题的是 TreeStore 的 storeId 属性。它被评论了，原因不明！当它没有被评论时，然后以某种方式删除了整个导航菜单项。

所以我回复了它并在 Ext.getStore() 方法上使用了 TreeStore 自己的名字。通过这种方式解决了问题，场景完美运行；

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

Ext JS 中TreeStore 不能实现filterBy 方法吗？

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

javascript

extjs

filter

hide

treestore