extjs - 分机 JS 4 : Filtering a TreeStore

Question

我最初在 Sencha 论坛上发布了这个 here但没有得到任何回复(除了我自己的答案，我将很快发布)，所以我将在这里重新发布，看看我是否能得到更多帮助。

我一直在绞尽脑汁思考如何在 4.0.7 中过滤 TreeStore。我尝试了以下方法:

型号

Ext.define('model', {
  extend: 'Ext.data.Model',
  fields: [
    {name: 'text', type: 'string'},
    {name: 'leaf', type: 'bool'},
    {name: 'expanded', type: 'bool'},
    {name: 'id', type: 'string'}
  ],
  hasMany: {model: 'model', name: 'children'}
});

本店

Ext.define('myStore', {
  extend: 'Ext.data.TreeStore',
  model: 'model',
  storeId: 'treestore',
  root: {
    text: 'root',
    children: [{
      text: 'leaf1',
      id: 'leaf1',
      children: [{
        text: 'child1',
        id: 'child1',
        leaf: true
      },{
        text: 'child2',
        id: 'child2',
        leaf: true
      }]
    },{
      text: 'leaf2',
      id: 'leaf2',
      leaf: true
    }]
  },
  proxy: {
    type: 'memory',
    reader: {
      type: 'json'
    }
  }
});

树

var myTree = Ext.create('Ext.tree.Panel', {
  id: 'myTree',
  selType: 'cellmodel',
  selModel: Ext.create('Ext.selection.CellModel', {mode: 'MULTI'}),
  rootVisible: false,
  store: Ext.create('myStore'),
  width: 300
});

过滤器

var filter = Ext.create('Ext.util.Filter', {
  filterFn: function(item) {
    return item.data.text == 'leaf1';
  }
});

所以我认为我的问题是......我不知道如何使用这个过滤器，因为 TreeStore 实际上没有像普通商店那样继承任何类型的过滤器功能。我试过了:

myTree.store.filters.add(filter);
myTree.store.filters.filter(filter);  // This seems to work
// I can get into the filterFn when debugging, but I think item is the "this" of my filter object.

通常，如果我有一个网格并且我创建了一个像上面那样的过滤器，我可以做 myTree.store.filter(filter)它会根据我返回的内容获取每一行的项目/过滤器……但我在想，因为 TreeStore 没有继承过滤功能，所以没有传入。

如果有人可以澄清我做错了什么或对如何设置过滤器功能/我的思考过程有任何见解，请继续。我很感激任何帮助。

Answer 1

感谢您发现 other one ，我修复了答案以包含我在下面包含的更动态的树存储过滤器覆盖来回答您的问题。

它在 4.1b2 中运行良好，我知道在 4.07 和 4.1 之间对 treestore 进行了一些更改，但我认为 4.07 仍然具有我在这里使用的树对象。

这是覆盖:

Ext.override(Ext.data.TreeStore, {

    hasFilter: false,

    filter: function(filters, value) {

        if (Ext.isString(filters)) {
            filters = {
                property: filters,
                value: value
            };
        }

        var me = this,
            decoded = me.decodeFilters(filters),
            i = 0,
            length = decoded.length;

        for (; i < length; i++) {
            me.filters.replace(decoded[i]);
        }

        Ext.Array.each(me.filters.items, function(filter) {
            Ext.Object.each(me.tree.nodeHash, function(key, node) {
                if (filter.filterFn) {
                    if (!filter.filterFn(node)) node.remove();
                } else {
                    if (node.data[filter.property] != filter.value) node.remove();
                }
            });
        });
        me.hasFilter = true;

        console.log(me);
    },

    clearFilter: function() {
        var me = this;
        me.filters.clear();
        me.hasFilter = false;
        me.load();
    },

    isFiltered: function() {
        return this.hasFilter;
    }

});

它使用 store.tree.nodeHash对象以针对过滤器迭代所有节点，而不仅仅是第一个子节点。它将接受过滤器作为函数或属性/值对。我想 clearFilter 方法可以解决，但可以防止另一个 ajax 调用。