Tuesday, November 27th, 2007

New Grid Filter Plugin for Ext

Category: Sencha

Ext 2.0’s design goal of making it easily extensible has been a rousing success. Witness the frenetic 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 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)

This feature list doesn’t really do justice to how easy this plugin makes creating rich, powerful grids that can be filtered on the server side.

Grid Filter Demo

For a demo, see here. For more screen shots, see here.

Posted by Dietrich Kappe at 12:25 pm

4.5 rating from 59 votes


Comments feed TrackBack URI

Nice, it will be so useful in large scale of records, where a keyword for search will lead to many results. But I think it isn’t agile to use filter in a normal number of records. It would be better to build a plugin for implementing smart find dialog like what we have in all desktop applications.
however in my point it’s an awesome idea.

Comment by phpcs — November 27, 2007

Does Ext support virtual grid scrolling?
The demo includes grid paging, but not virtual scrolling (as in Dojo).

Comment by Les — November 27, 2007

Indeed this is awesome stuff! We are using these filters all over the place in our CMS and it makes for a fully featured user experience. Can’t wait to upgrade it all to EXT 2.

Comment by Steve Nolte — November 27, 2007

This is a very nice addition to to the Ext Grid.

Comment by Site Smart — November 27, 2007


It does. I have extended a few classes and created an extension to support virtual scrolling.

Comment by Thorsten — November 27, 2007

Ext: the very definition of fear for Microsoft. Never have I seen web application such as the examples built with Ext 2.0, with such a huge potential for LOB applications.

Comment by Mike — November 27, 2007

@phpcs: “But I think it isn’t agile to use filter in a normal number of records. It would be better to build a plugin for implementing smart find dialog like what we have in all desktop applications.”

Not quite a plugin, but there is a “live search” example that shows something similar (live searching the Ext forums, with buffered keypress handling for dynamically updating the filter while typing): http://extjs.com/deploy/dev/examples/form/forum-search.html

An actual implementation of a true “smart find” would be somewhat application-dependent, but this example would be a great starting point.

Comment by Brian — November 28, 2007

Search for FilterAsYouType to see other implementations of the “live search” concept. FilterAsYouType is a similar concept to “autocomplete”, but autocomplete is usually restricted to finding one target out of many.

FilterAsYouType is intended to subset a potentially large dataset into a smaller subset. This feature can be seen in Firefox under “about:config”.

Comment by dreftymac — June 10, 2008

Leave a comment

You must be logged in to post a comment.