Ext

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.

Many developers are familiar with the rich UI capabilities included within the Ext framework. The core team has worked very hard to provide as much functionality as possible to help build top-notch applications that are not only visually appealing but incredibly powerful. While we’ve tried to cover many common “use cases”, invariably there’s going to be a need for new and exciting features that we haven’t tackled. This is where the Ext community comes in.

Community Contributed Extensions

The Ext community has done an amazing job at creating some fantastic plugins to the framework which in some cases dramatically enhance existing controls and in many cases, add whole new UI capabilities altogether! We’ll be reviewing several extensions which standout both in functionality and quality.

LiveGrid by MindPatterns

A typical “use-case” is one where you have a large result set that needs to be displayed in a grid control. Obviously, returning a large data set (e.g.: 50k rows) and managing that data client-side can be a challenge. Paging schemes and memory management come into play and both can have a dramatic impact on the user experience. Thorsten Suckow-Homberg developed an extension that gracefully handles this scenario. The plugin uses a buffering technique to load a specific number of records and after scrolling past the last buffered row, submits a new XHR call to return the next subset of records. This has the benefit of enhancing the user experience by not forcing the user to wait for a large result set to load and minimizing the browser memory requirements for managing a large result set.

http://extjs.com/forum/showthread.php?t=17791

Slate Theme by J.C.

While most Ext developers are more than happy to use the included themes, to many, having a unique look is increasingly important and the user community has really shined in this aspect. A great example of this is the “Slate Theme” created by Ext community member J.C.. The theme really stands out for it’s visual appeal as well as the clean work produced by J.C. He’s received tremendous kudos for his work and rightfully so.

http://extjs.com/forum/showthread.php?t=15989

Continously Growing

This is certainly not an exhaustive list of the available plugins for Ext but it does provide a flavor of what our community is doing to enhance the capability of the framework. The number of plugins continues to grow with both the Ext Extensions page and the Examples and Extras discussion group being updated almost on a daily basis. Community-contributed extensions are an integral part of the Ext project and we certainly value the hard work and professionalism demonstrated by many of these contributors. We will continue to spotlight plugins on a regular basis to ensure that our community members are recognized for their efforts.

One of the things that’s great about the Ext community is the innovative ways they make use of the framework. Many of our users are developing applications for the corporate space and that in itself requires a certain level of flexibility in order to integrate with the complex set of technologies associated with running an enterprise-level business.

Ext community member kubens (AKA Wolfgang) has done just that by creating a very cool front-end application that integrates with the AS-400. The AS-400 is a VERY powerful server system built by IBM and meant to be used in managing high-end OLTP and DSS type application needs. Suffice it to say that you won’t find these in your typical “mom and pop” shops as they’re specifically targeted at the enterprise space.

Wolfgang worked with his company’s AS-400 developer to create an interface for rendering charting data. Using JSON & Flash-based charting, they managed to produce a VERY slick interface with intuitive drill-down capability.

To find out more about Wolfgang’s application or to ask specific questions about his integration with the AS-400 platform, be sure to visit the forum and view his thread about his experience.

The Ext Team has been hard at work creating documentation for the 2.0 release. We now have several documents for new and existing Ext users that should come in very handy during the transition to 2.0.

Introduction to Ext

If you are brand new to Ext, you should start with our original tutorial, the Introduction to Ext. This tutorial was created for the original 1.0 release, but has been newly updated for 2.0. This is a great place to start if you’ve never written any code in Ext.

Ext 2.0 Overview

The Ext 2.0 Overview is primarily intended for those with some prior experience with Ext, as it dives into some advanced topics. However, it is a great place to start for anyone just getting their feet wet with 2.0. This overview provides an introduction to all of the major new areas within 2.0 including:

• The new Component Model that underlies all major components
• The new Container and Layout Models that provide the visual and structural framework for Ext
• Updates and new features for the Grid component
• The new XTemplate and DataView classes for template processing and data-bound UIs

Ext 1.x to 2.0 Migration Guide

Existing 1.x users should be happy to see the 1.x to 2.0 Migration Guide. Unfortunately, with changes of the magnitude made in 2.0, it was not possible to maintain complete backwards compatibility to 1.x. However, we have taken great pains to ensure that the upgrade path is as seamless as possible. This guide provides an extremely detailed overview of every breaking change between 1.x and 2.0, including comprehensive explanations of how and why each area changed. It also includes detailed API comparisons between classes when appropriate.

API Documentation

The developer API documentation has been fully updated for 2.0 as well. Along with the newly-designed doc center, it’s now easier than ever to find the help you’re looking for.

2.0 Final Release Coming Soon!

Ext 2.0 is available for download and code updates are available to SVN subscribers in the Ext SVN under branches/ext2.0. The final release for 2.0 is currently scheduled for November 15th.

Just a reminder: during the 2.0 pre-release period we are offering a 25% discount on all commercial license purchases. If you were considering a commercial license, now is the time!