title: Filter store on combobox selection
body: <p>I have tried this different ways, but still can't get the filter to work. My ext app lets user to choose a single state from a combobox, and the grid below displays more data on that selected "value"=state.. On select, the combobox fires a function that filters the store of the grid and updates the store...
  this is my store for the grid...</p>
  
  <pre><code>var store = Ext.create('Ext.data.Store', {
          autoLoad: true,
          id: 'OurData',
          pageSize: 20,
          pageNumber: 1,
          remoteSort: true,
          fields: [
      { name: 'States' },
      { name: 'FullName' },
      { name: 'Capital' },
      { name: 'Population' }
      ],
          proxy: {
              type: 'ajax',
              url: 'GetState/getS',
              reader: {
                  type: 'json',
                  root: 'myTable',
                 idProperty: 'States',
                  totalProperty: '@count'
              }
          }
      });
      store.loadPage(1);
  </code></pre>
  
  <p>this is my combobox</p>
  
  <pre><code>xtype: 'combo',
                      id: 'iccombo',
                      scope: this,
                      store: this.Combostore,
                      fieldLabel: 'Short State',
                      displayField: 'States',
                      valueField: 'States',
                      typeAhead: true,
                      triggerAction: 'all',
                      queryMode: 'remote',
                      name: 'State',
                      labelWidth: 125,
                      anchor: '95%',
                      listeners: {
                          scope: this,
                          select: this.fireFilter
                      }
  </code></pre>
  
  <p>and this is where the filter should take place...</p>
  
  <pre><code>fireFilter: function (value) {
  
      // Get passed value
      this.selectedC = value.getValue();
      console.log('selectedValue: ' + this.selectedC);
  
      // Clear existing filters
      this.store.clearFilter(false);
  
      // Build filter
  
      var myfilter = Ext.create('Ext.util.Filter', {
          scope: this,
          filterFn: function (item) {
              var fieldNames = item.fields.keys;
  
              for (var j = 0; j &lt; fieldNames.length; j++) {
                  var fieldName = fieldNames[j];
                  if (item.data[fieldName] != null) {
                      var stringVal = item.data[fieldName].toString();
                      if (stringVal != null &amp;&amp; stringVal.toLowerCase().indexOf(value.toLowerCase()) != -1) {
                          return true;
                      }
                  }
              }
              return false;
          }
  
      });
      // Apply filter to store
      this.store.filter(myfilter);
  }
  </code></pre>
  
  <p>when I run the code, it display all data in the grid, and on selection of combobox, it still shows the same data..
  For some reason, the code never runs through the filterFn... because my console.log doesn't show up
  this is what I got in firebug's response</p>
  
  <pre><code>_dc     1352902173425
  filter  [{"property":null,"value":null}]
  limit   20
  page    1
  start   0
  </code></pre>
  
  <p>as you can clearly see, the selected 'value' is null, but my 'console.log' prints the value selected... I think the way I am getting the passed value and applying the filter is incorrect... can someone please take a look... thanks</p>
  
  <p>UPDATE... I am able to get inside the function and my console.log shows all the fields... but once I get to the last if statement... I get this error</p>
  
  <blockquote>
    <p>TypeError: value.toLowerCase is not a function</p>
  </blockquote>
  
  <p>What am I doing wrong here? Thanks</p>