title: Add filter to a Extjs grid
body: <p>I want to add some filters to my grid when I clicked on the filter button (see below).The filters must be add tot the grid with the given values from the filterpanel form. </p>
  
  <p>On this page the textfield will be filled in and when I clicked on the filter button the onFilterClick handler will trigger the FilterController.</p>
  
  <pre><code>Ext.define('path.to.filterPanel', {
  extend: 'Ext.form.Panel',
  
  xtype: 'filter',
  controller: 'dashboard-filter',
  
  viewModel: { 
      type: 'dashboard-filter' 
  },
  
  frame: false,
  bodyPadding: 10,
  layout: 'form',
  
  // the fields 
  items: [{
      xtype: 'textfield',
      name: 'firstName',
      id: 'firstName',
      fieldLabel: 'Firstname'
  }, {
      xtype: 'textfield',
      name: 'lastName',
      id: 'lastName',
      fieldLabel: 'Lastname'
  }],
  
   buttons: [
      text   : 'Filter',
      handler: 'onFilterClick' // trigger to the controller
  }]
  });
  </code></pre>
  
  <p>When clicked on the Filterbutton the values will be pust to this controller.</p>
  
  <pre><code>Ext.define('path.to.FilterController', {
  extend: 'Ext.app.ViewController',
  alias: 'controller.dashboard-filter',
  
  onFilterClick: function(button) {
  
      var form = button.up('form').getForm();
  
      if (form.isValid()) {
          // form valid 
  
          var firstName = Ext.getCmp("firstName").getValue();
          var lastName = Ext.getCmp("lastName").getValue();
  
          // check if there is some input
          if (!!employeeNumber || !!firstName || !!lastName) {
  
  
              // add filters but how??
  
  
          } 
      } else {
          // form not valid
          console.log("not valid");
      }
  }
  });
  </code></pre>
  
  <p>Finally this is the grid file where the filters must be added.</p>
  
  <pre><code>Ext.define('path.to.gridPanel, {
  extend: 'Ext.grid.Panel',
  
  requires: [
      'Ext.grid.column.Action',
      'App.store.Employees'
  ],
  
  controller: 'dashboard-gridVieuw',
  xtype: 'gridVieuw',
  store: 'Employees',
  
  stateful: true,
  collapsible: true,
  multiSelect: true,
  
  stateId: 'gridController',
  
  initComponent: function () {
      this.store = new App.store.Employees();
      var me = this;
  
      me.columns = [{
          header   : 'Firstname',
          flex     : 1,
          sortable : true,
          dataIndex: 'firstName'
      }, {
          header   : 'Lastname',
          flex     : 1,
          sortable : true,
          dataIndex: 'lastName'
      }]
  
  me.callParent();
  }
  });
  </code></pre>
  
  <p>I use version 5 of extjs.</p>