Extended Filtering Using the Grid Filter 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:Any new features in the works?
- 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)
"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.