title: Use of ArrayStore to filter grid locally
body: <p>I need to <code>FILTER</code> my grid based on certain criteria. </p>
  
  <p>For example; if there are 3 fields, <code>Name,age,school</code>. I need to filter the grid Locally, so that it displays all students with the <code>age</code> 10 in the grid.</p>
  
  <p>I read that this is achievable if i use <code>Ext.data.ArrayStore</code>. But i am not sure how to apply this in to my code. My Store class looks like this;</p>
  
  <pre><code>Ext.define('Project.store.Person',{
      extend:'Ext.data.Store',
      model:'App.model.Person',   
      proxy: {
          type: 'ajax',
          url : '/person.php'
      }
  });
  </code></pre>
  
  <p>My Model;</p>
  
  <pre><code>Ext.define ('Project.model.Person',{
      extend: 'Ext.data.Model',   
      fields:['name','age','school']
  });
  </code></pre>
  
  <p>How can i apply <code>Ext.data.ArrayStore</code>, in order to filter columns locally. Like to display all students who are <code>10</code> years of <code>age</code>.</p>
  
  <pre><code>**UPDATE**
  </code></pre>
  
  <p>GRID - View</p>
  
  <pre><code>this.columns = [
      {
  { text: "Size", dataIndex: 'size' ,filter: {
              type: 'list',
              options: ['small', 'medium', 'extra large']
  
          } }, ...
  </code></pre>
  
  <p>STORE</p>
  
  <pre><code>Ext.define('SerenExample.store.GridFilterExample',{
      extend:'Ext.data.Store',
      model:'App.model.GridFilterExample',
      remoteFilter: false,
      remoteGroup:true,
      proxy: { ...
  </code></pre>
  
  <p>I don't see the check box saying filter, when i click on the respected column</p>
  
  <p><strong>UPDATE</strong></p>
  
  <pre><code>Ext.define('SerenExample.view.GridFilterExample' ,{
  extend: 'Ext.grid.Panel',
  alias : 'widget.gridfilt',
  features: [],
      initComponent: function() {
          this.store = 'GridFilterExample';
  
          this.columns = [
      {
      ...
  </code></pre>
  
  <p><strong>UPDATE 2</strong></p>
  
  <pre><code>GET http://localhost/SerenExample/feature/filters.js?_dc=1341677311248 404 Not Found 104ms
  "NetworkError: 404 Not Found - http://localhost/SerenExample/feature/filters.js?_dc=1341677311248"
  
  Ext.define('SerenExample.view.GridFilterExample' ,{
  extend: 'Ext.grid.Panel',
  alias : 'widget.gridfilt',
  features: [  {ftype: 'filters',
              autoReload: false,
              local: true,                
              filters: [{
                  type: 'list',
                  dataIndex: 'status',
                              options: ['small', 'medium', 'extra large']
              }]}],
      initComponent: function() {
          this.store = 'GridFilterExample';
  
          this.columns = [
      {
  </code></pre>