title: Ext JS 4: Filtering a TreeStore
body: <p>I originally posted this on the Sencha forums <a href="http://www.sencha.com/forum/showthread.php?184010-TreeStore-filtering." rel="nofollow">here</a> but didn't get any responses (other than my own answer, which I will post soon), so I am going to repost it here and see if I get anymore help.</p>
  
  <p>I've been racking my brain on how to filter a TreeStore in 4.0.7. I've tried the following:</p>
  
  <p><strong>The model</strong></p>
  
  <pre><code>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'}
  });
  </code></pre>
  
  <p><strong>The store</strong></p>
  
  <pre><code>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'
      }
    }
  });
  </code></pre>
  
  <p><strong>The tree</strong></p>
  
  <pre><code>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
  });
  </code></pre>
  
  <p><strong>The filter</strong></p>
  
  <pre><code>var filter = Ext.create('Ext.util.Filter', {
    filterFn: function(item) {
      return item.data.text == 'leaf1';
    }
  });
  </code></pre>
  
  <p>So I think my problem is... I don't know how to use this filter due to TreeStore not actually inheriting any type of filter functions like a normal store. I've tried:</p>
  
  <pre><code>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.
  </code></pre>
  
  <p>Normally, if I have a grid and I create a filter like above, I can just do <code>myTree.store.filter(filter)</code> and it'll grab each row's item/filter on what I return... but I'm thinking because TreeStore doesn't inherit a filtering function, that's not being passed in.</p>
  
  <p>If someone could provide some clarity as to what I'm doing wrong or any insight on how to set up a filter function/my thinking process, please go ahead. I'd appreciate any help.</p>