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


Comments


Log in to comment or register here.
Intro Top Scripts Live Feed

About Scriptremix.com

Scriptremix.com is a online web script content site powered by people like you which aims to collect the best resources, tips, and ideas about CSS, HTML, SEO, JavaScript, AJAX, PHP, ASP, .net, linux, XML, CMS, BLOG, Prototypes, Browser Compatibility and much more in online web.

You can submit and share your favorite web script here in just few easy step.

Submit Script
Top Search Tag Cloud
Top Tags
1080p 160 gb 4.3-inch accessible adsense adsense tricks affiliate ajax alstrasoft animation api application applications asp.net atlanta autocomplete automatic autosuggest babies baby background backlinks battery birth black blog blogging bluetooth bonus bonuses books browser business calendar canon cartridges case mods casemods casio cctv video security camera systems charger childbirth chronograph class classes classifieds cleaner clickbank clone cms code coldfusion collection color comments commission community software component conception control create cross-browser css database demo descargar development digg digital display div dj documentation dom domain doulas download drag & drag and drop dynamic easy effect element elements elledub engine episode example examples expecting extensions facebook features fetus firefox flash flickr flora flora delivery florist florist delivery flower arrangement flower delivery forex forms framework free fresh flowers function functionality gallery games getting pregnant google gps gratis guitar lessons hdtv health help hidden cameras home hoover how how to how to paint html ideas image images implementation infertility infrared illuminators ink input install interface internet invicta invitrofertilization iscripts javascript javascript framework javascript library joomla joomlatemplatesme jquery jquery plugin json juegos jugar layout lcd learn learn & learn and master painting learn and master painting review learn painting learn painting at home learn to paint learning painting led library light lightbox lightweight link links loading magellan mahjong marketing master painting media medical men' menu message microwave mix mobile modding module mootools myspace mysql natural birth navigation navigator noise nutrition online open open source optimization options organization painting painting books painting classes painting dvds painting lessons painting lessons dvds painting tutorials pay per click photo php php script player plug-in plugin plugins podcast popup portable portable gps pregnancy tests pregnant producer professional program programming progress prototype rails red released review reviews rockettheme router ruby ruby on rails s samsung schumacher script script.aculo.us scriptaculous search search engine security cameras systems seo september series sharp silver silverlight site slider slideshow slr social networking social networking script software stainless steel stop style support system tag techniques template templates th the thumbnails tip tooltip traffic training tutorial tutorials ultima ii unobtrusive using vacuum validation version video video surveillance cameras viral watch web web application web applications website widescreen widget window windows wordpress wysiwyg x xhtml xml yahoo youtube yui