title: Add a component below header in Extjs grid
body: <p>I have a grid in ExtJs5 with 3 columns. I want to add a component like textfield below header and before starting rows in a grid. Actually i want to filter data based on values in textfield.</p>
  
  <p>Note - I don't want to add a textfield in header. I want below header of a grid.</p>
  
  <p>Here is grid coding - </p>
  
  <pre><code>Ext.onReady(function () {
              var studentStore = new Ext.data.JsonStore({
                  autoLoad: true,
                  pageSize: 10,
                  fields: ['Name', 'Age', 'Fee'],
                  data: {
                      items: [
                          { "Name": 'Puneet', "Age": '25', "Fee": '1000' },
                          { "Name": 'Ankit', "Age": '23', "Fee": '2000' },
                          { "Name": 'Rahul', "Age": '24', "Fee": '3000' }
                      ]
                  },
                  proxy: {
                      type: 'memory',
                      reader: {
                          type: 'json',
                          rootProperty: 'items'
                      }
                  }
              });
  
              var window = new Ext.Window({
                  id: 'grdWindow',
                  width: 400,
                  title: 'Grid Samples',
                  items: [
                      {
                          xtype: 'panel',
                          layout: 'fit',
                          renderTo: Ext.getBody(),
                          items: [
                              {
                                  xtype: 'grid',
                                  id: 'grdSample',
                                  height: 300,
                                  store: studentStore,
                                  columns: [
                                      {
                                          header: 'Name',
                                          dataIndex: 'Name'
                                      },
                                      {
                                          header: 'Age',
                                          dataIndex: 'Age'
                                      },
                                      {
                                          header: 'Fee',
                                          dataIndex: 'Fee'
                                      }
                                  ]
                              }
                          ]
                      }
                  ]
                  }).show();
              });
  </code></pre>
  
  <p>Here it is image  - result of above code - </p>
  
  <p>I have marked where i need a textboxes - </p>
  
  <p><a href="https://i.stack.imgur.com/kKmSb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kKmSb.png" alt="enter image description here"></a></p>
  
  <p>I got some solution of this problem like use tbar, bbar, dockedItems and many other but couldn't work as i want.</p>