Sencha Inc. | HTML5 Apps

Blog

Extended Filtering Using the Grid Filter Plugin

November 26, 2007 | ReyBango

The 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.

There are 15 responses. Add yours.

Ajaxian » New Grid Filter Plugin for Ext

7 years ago

[...] activity in the extensions and plugins forum. Now Steve Skrla from ControlPath has released a Grid Filter plugin that expands greatly on the basic filtering provided by Ext. From the feature [...]

Javascript News » Blog Archive » New G

7 years ago

[...] activity in the extensions and plugins forum. Now Steve Skrla from ControlPath has released a Grid Filter plugin that expands greatly on the basic filtering provided by Ext. From the feature [...]

Ajax Girl » Blog Archive » New Grid Fi

7 years ago

[...] activity in the extensions and plugins forum. Now Steve Skrla from ControlPath has released a Grid Filter plugin that expands greatly on the basic filtering provided by Ext. From the feature [...]

Phunky

7 years ago

Much

» The Links » roarin’ reporter

7 years ago

[...] Extended Filtering Using the Grid Filter Plugin (ExtJS) [...]

links for 2007-11-29 « sySolution

7 years ago

[...] Ext JS Blog - » Extended Filtering Using the Grid Filter Plugin (tags: extjs) [...]

Ext JS ??-?????? » Blog Archive » 4 ??

7 years ago

[...] ???????? ? ??????????? ????? ? ?????????? “Extended Filtering Using the Grid Filter Plugin“. ? ??? ??????? ???????? ????????????? ???????? [...]

Vinny Carpenter’s blog » Daily del.ici

7 years ago

[...] Ext JS Blog - » Extended Filtering Using the Grid Filter Plugin - Steve Skrla has created the Grid Filter plugin which has quickly become one of the most popular user extensions in the Ext community [...]

Vinny Carpenter’s blog » Daily del.ici

7 years ago

[...] Ext JS Blog - » Extended Filtering Using the Grid Filter Plugin - Steve Skrla has created the Grid Filter plugin which has quickly become one of the most popular user extensions in the Ext community [...]

caturstudio

7 years ago

where i can get the source of ‘action.php’
at

var ds = new Ext.data.GroupingStore({
    proxy: new Ext.data.HttpProxy({
    url:‘action.php’
    }),

Extended Filtering Using the Grid Filter Plugin [

7 years ago

[...] 26th 2007 9:34pm [-] From: extjs.com [...]

blood pressure ranges

6 years ago

blood pressure ranges

(Blogger now has backlinks - very similar to the trackback feature in Movable Type. The term is used colloquially for any kind of Linkback.

Vernie

6 years ago

Vernie

Every great dream begins with a dreamer. Always remember, you have within you the strength, the patience, and the passion to reach for the stars to change the world.

Jessie

6 years ago

joint pain after pregnancy…

I found your post interesting and share most of your views, but just dont get your second point….

pligg.com

6 years ago

Extended Filtering Using the Grid Filter Plugin…

The 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 ...

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.