代码之家 › 专栏 › 技术社区 › Nuri Engin

无法在Ext JS中为TreeStore实现filterBy方法?

treestore hide filter extjs javascript

Nuri Engin · 技术社区 · 8 年前

我正在关注这个 fiddle 哪些过滤器 TreePanel 。我的目的是隐藏几个 TreeStore 项目取决于记录的帐户 username 。

我用了拉小提琴的主意 login 我的应用程序的方法,但现在它显示任何项目!如何克服这种情况?

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

我已经定义了小提琴上提到的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: [
                    {...}
                 ]
                },

2 回复 | 直到 8 年前

acteon 8 年前

rootProperty定义应位于存储代理的读取器中

例如:

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

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

Jan 8 年前

我成功地通过所提到的小提琴和我自己的结构过滤项目。

唯一引起这个问题的是 storeId 的属性 TreeStore . 它被评论的原因不得而知!当它没有被评论,然后不知何故删除了整个导航菜单项。

所以我对它进行了回复并使用 树顶 上的自己的名称 Ext.getStore() 方法这样就解决了问题,scenerio工作得很好;

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