extjs - Ext JS 4 : Filtering a TreeStore

我最初将其发布在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不继承过滤器功能，没有被传递。

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

最佳答案

感谢您捕获other one，我确定了答案，以包含更多动态的树存储过滤器覆盖，我将在下面覆盖该覆盖以回答您的问题。

它在4.1b2中运行良好，我知道4.07和4.1之间的树存储有一些更改，但是我认为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调用。