Extended Filtering Using the Grid Filter Plugin
Monday, November 26th, 2007The ability to filter Ext grids is a common use-case and also one of the most frequently discussed topics in the forums. While the Ext.data.Store class includes the capability to filter data, users invariably want to extend past the base functionality and filter data in more advanced ways. One such user is Steve Skrla (AKA: ambience). He’s created the Grid Filter plugin which has quickly become one of the most popular user extensions in the Ext community. I had a chance to interview Steve about his plugin and get a better understanding about it:
Can you give us an explanation of the plugin?
“The grid filters are a plug-in for the standard grids (and any derivation that keeps to the standard event model) that allow for a slightly more robust representation of filtering then is provided by the default store. Additionally, they provide both a programmatic and graphical interface, an event model, local store filtering, and customizable parameter serialization.
By default, the filters apply a new menu to the column menus. Through this menu users can configure, enable, and disable filters for each column. There has been some criticism by a few developers who feel that the filter configuration should be done in a single panel / window. However, the API does not preclude some one else writing a different interface entirely, but no one has taken up the call as of yet =)”
Ext already includes filtering capabilities. What prompted you to extend this?
“We (ControlPath) had a dynamic table component that I developed before Ext was around that had filtering functionality on each of the column headers. As a rule, we try to maintain the same level of functionality even across major changes in platform. While the Store architecture is great, it’s concept of filtering was more or less ‘all or nothing’ and limited to local filtering. Where as we required filters that where executed on the server and could be incrementally added and removed. Coupled with the need to provide some sort of compact UI in the “powerful, but only if you need it” spirit, I felt that the existing column header menu was a prefect candidate for extension. The original implementation of the extension was actually a custom store and view, but when Ext 2.0 came out Jack suggested that the filters could possibly be a plug-in. As usual, he was correct. As a plug-in the filters can now be coupled with custom stores and views (such as the grouping store / view in the example).”
You’ve put a lot of work into this plugin and it truly shows. What are the main features of the plugin?
Feature List:
- Creating of custom filter types and menus is as easy as extending Ext.ux.grid.filter.Filter.
- Grid configuration information can be persisted across page loads by passing a stateId parameter.
- Packaged with filters for Strings, Numeric Ranges, Date Ranges, Lists (which can be backed by a Ext.data.Store), and Boolean
- Column menu based configuration menus.
- Filtered column feedback through a configurable class applied to column headers.
- Function as a PagingToolbar plug-in to reset the current page when there is a filter change.
- Fully event driven and configurable through the config parameter (in the spirit of Ext.Component)
Any new features in the works?
“I am mainly concerned with making the current version as stable as possible and addressing smaller API issues that developers run across at the moment. But I plan on incorporating functionality to allow for that application of a class to each cell in a filtered column as well as tie into the existing Ext.grid.GridPanel state information.”
The demo you provided was a great example of the power of the Grid Filter plugin. Give us some details about the demo.
“The example URL provided in the post should be fine. It’s basically some data scraped from ThinkGeek.com which you can filter through the column menus. I believe each of the bundled filter types are represented through various columns.”
Steve also has screenshots of more filters that he’s applied that demonstrate advanced filtering capabilities They can be found at http://extjs.com/forum/showthread.php?p=71404#post71404
Along with Steve, we have to acknowledge & credit Doug Hendricks (hendricd) for his indispensable help in debugging and responding to developer questions. Both Steve and Doug are extremely active on the forums and support for the Grid Filter plugin can be found via this thread. Containing 11 pages, the thread is certainly one of the most active and demonstrates their commitment to the plugin.





The
Existing 1.x users should be happy to see the 