ExtJS Filter Across All Grid Cells

ExtJS offers the ability to filter rows based on a column. By setting filters features in grid like so :

and defining filters on your columns like so :

You can get some pretty cool filtering functionality in your grids by clicking on the column drop down

However what if you wanted to filter grid rows globally (Ie. not restricted on a column) ?

The best way would be to add a textfield to your toolbar, or somewhere above your grid, and then have some method that filters across all rows based on the text you input.

The following code filters rows based on a text string.

Notes :

  1. To get all visible columns the codes uses the Ext.ComponentQuery functionality. This allows us to query components in the grid. Don’t ask me how it works, but the following returns just the columns that are visible : grid.query(‘gridcolumn:not([hidden])’);
  2. we need to iterate over each row, and then each cell so we have two loops here
  3. this function gets a column for a given field ID. We need this column later.
  4. A field may not be associated with a column. In extJS your store’s table of data may include additional columns that are not visible in the extjs grid.
  5. Now we check if the column has a renderer. With our filter function we can only filter on string values. Because column types may vary, the only way we can filter across strings is to get the rendered value. So we get the render function and pass our rec data value through it to get the string value.
  6. comparison
  7. set filterMeOut flag
  8. call the filterBy method on the store, passing in a custom function which does the comparison on our filterMeOut flag.

You can then call the method through a text field like this.


Posted in extjs | Tagged , | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

THREE_COLUMN_PAGE