title: How to add search filter in EXTJS
body: <p>I created a table using extjs where it is having three columns <strong>name, email and cars</strong>. In extjs we are having a default sorting method. here i want to add search method for all these three columns so that i can also search using the name, email and cars.
  What change i need to do for the below code
  <a href="https://i.stack.imgur.com/J9pDd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J9pDd.jpg" alt="Below that arrow mark i need toget the search Filter"></a>
  The expected output is i need to get search filter option under each columns.</p>
  
  <pre><code> Ext.define('ViewerModel', {
      extend: 'Ext.app.ViewModel',
      alias: 'viewmodel.viewermodel',
  
      stores: {
  
          mystore: {
  
              fields: ['name', 'email', 'cars'],
              data: {
                  'items': [{
                      'name': 'Lisa',
                      "email": "lisa@simpsons.com"
                  }, {
                      'name': 'Bart',
                      "email": "bart@simpsons.com"
                  }, {
                      'name': 'Homer',
                      "email": "homer@simpsons.com"
                  }, {
                      'name': 'Marge',
                      "email": "marge@simpsons.com"
                  }]
              },
  
              proxy: {
                  type: 'memory',
                  reader: {
                      type: 'json',
                      rootProperty: 'items'
                  }
              }
          }
  
      }
  });
  
  Ext.define('APP.HorizontalBox', {
      extend: 'Ext.container.Container',
      requires: ['Ext.layout.container.HBox'],
      xtype: 'layout-horizontal-box',
      width: 750,
      height: 300,
      layout: {
          type: 'hbox',
          align: 'stretch'
      },
      bodyPadding: 10,
  
      defaults: {
          frame: true,
          bodyPadding: 10
      },
      viewModel: {
          type: 'viewermodel'
      },
  
      items: [{
          xtype: 'grid',
          title: 'Grid: click on the grid rows',
          itemId: 'myGridItemId',
          flex: 1.2,
          margin: '0 10 0 0',
          bind: {
              store: '{mystore}',
              selection: '{users}'
          },
          columns: [{
              text: 'Name',
              dataIndex: 'name',
              flex: 0.5
          }, {
              text: 'Email',
              dataIndex: 'email',
              flex: 1
          }, {
              text: 'Cars',
              dataIndex: 'cars',
              flex: 1
          }],
  
          dockedItems: [{
              xtype: 'toolbar',
              dock: 'top',
              items: [{
                  xtype: 'button',
                  padding: '2 5 2 5',
                  text: 'Edit item',
                  handler: function (btn) {
                      var grid = btn.up('grid');
                      var selectedRow = grid.getSelectionModel().getSelection()[0];
                      var janela = Ext.create('APP.MyWindow', {
                          animateTarget: btn.getEl(),
                          //EDITED
                          viewModel: {
                              data: {
                                  users: selectedRow
                              }
                          }
                      }).show();
                  }
              }]
          }],
      }, {
          xtype: 'form',
          title: 'View',
          itemId: 'panelbindItemId',
          flex: 1,
          margin: '0 10 0 0',
          defaults: {
              labelWidth: 50
          },
          items: [{
              xtype: 'displayfield',
              margin: '20 0 0 0',
              fieldLabel: 'Name',
              bind: '{users.name}'
          }, {
              xtype: 'displayfield',
              fieldLabel: 'Email',
              bind: '{users.email}'
          }]
      }]
  });
  
  Ext.define('APP.MyWindow', {
      extend: 'Ext.window.Window',
      alias: 'widget.mywindow',
  
      reference: 'windowreference',
  
      title: 'MyWindow | Edit record',
      closable: true,
      modal: true,
      padding: '10px',
      height: 150,
      layout: 'fit',
  
      initComponent: function () {
          var me = this;
  
          Ext.apply(me, {
  
              items: [{
                  xtype: 'form',
                  layout: 'anchor',
                  defaults: {
                      padding: '5 0 5 0'
                  },
                  items: [{
                      xtype: 'textfield',
                      margin: '10 0 0 0',
                      fieldLabel: 'Name',
                      bind: '{users.name}'
                  }, {
                      xtype: 'textfield',
                      fieldLabel: 'Email',
                      bind: '{users.email}'
                  }]
              }]
          });
  
          me.callParent(arguments);
  
      }
  });
  
  Ext.application({
      name: 'Fiddle',
      launch: function () {
          Ext.create('APP.HorizontalBox', {
              renderTo: document.body,
              width: 750,
              height: 400,
              title: 'Title'
          });
  
      }
  });
  </code></pre>