title: Apply grid filter programmatically from function
body: <p>Using Ext.ux.grid.FiltersFeature, I have remote filters and I am trying to write a function to apply a date filter on a grid column programmatically (rather than clicking on the filter drop down menu in the column header). The first time I run the function the grid store gets reloaded without the filter. When I run the function a second time (and every time thereafter) it works totally fine, the store reloads with the filters. Here is the gist of the function I have:</p>
  
  <pre><code>// a filter object for testing
  aFilter = {type: 'date', field: 'a_date_field', comparison: 'gt', value: '2012-03-08 00:00:00'}
  
  var grid = Ext.create('Ext.grid.Panel', {
      store: store,
      features: [{
          ftype: 'filters',
      }],
      columns[{
          header: 'ID',
          dataIndex: 'id',
          itemId: 'id',            
          width: 40,
      }, {
          xtype: 'datecolumn',
          header: 'Date',
          dataIndex: 'a_date_field',
          itemId: 'a_date_field',
          width: 75,
          format:'j-M-Y',
          filterable: true
      }],
      listeners: {
          'afterrender': function() {
  
              // Need to create the filters as soon as the grid renders
              // rather than waiting for the user to click on the header
              grid.filters.createFilters();
          }
      },
      bbar: [{
          text: 'Do a filter',
          handler: function() {
  
              // get the filter that is attached to the grid
              var gridFilter = grid.filters.getFilter(aFilter.field);
  
              // have to do this to create a menu for this filter
              gridFilter.init({dataIndex: aFilter.field, type: aFilter.type, active: true});
  
              // if this column is a date filter column
              if (gridFilter.type == 'date') {
                  var dateValue = Ext.Date.parse(aFilter.value, 'Y-m-d H:i:s');
                  if (filter.comparison == 'gt') {
                      gridFilter.setValue({after: dateValue});
                  } else {
                      gridFilter.setValue({before: dateValue});
                  }
              }
          }
      }
  });
  </code></pre>
  
  <p>I also found that this function works the first time if I click on <em>any</em> grid header menu before I run the function. </p>
  
  <p>I've been trying to find out what changes are made to the grid which make the filter work after the first attempt fails or what clicking on <em>any</em> grid header does to make it work. But nothing I add seems to fix it so it will run the first time. Has anyone implemented this successfully?</p>