Filter for grid

Question

Ext.define('TPL.view.Book', {
extend: 'Ext.grid.Panel',
alias: 'widget.book',
title: 'Books',
store: 'Book',
header: false,
stripeRows: true,
initComponent: function() {
    this.columns = [
        {header: 'Id', dataIndex: 'id', flex: 1},
        {header: 'Author', dataIndex: 'author', width: 50, flex: 0},
        {header: 'Price', dataIndex: 'price', width: 50, flex: 0},
    ];
    this.callParent(arguments);
}});

And in header (column - 'Author') i am want make filter - so when a user enters a word into the filter, then outputs the result in the table (filter should be independent case for words). How make this? thanks

about this:

Answer 1

To use filters on the grid panel you have to do the following:

• add 'Ext.ux.grid.FiltersFeature' to the 'requires' property of your grid,

• add filters as a feature to your grid panel:

  features: [
      {
          ftype: 'filters',
          local: true
      }
  ]
  

• and finally, mark the columns you which to have the filter using the property 'filter':

  {
      xtype: 'gridcolumn',
      filter: {
          type: 'string'
      }
      ...
  }