Back on the 4th of December, the ExtJS team announced the official release of ExtJS 2.0. Sorry I'm a bit late to get to this, but I've been a little busy with a move, and other fun things. I had the excellent opportunity to preview the 2.0 release in advance, and I have to tell everyone that it is outstanding, a true work of art. The team has gone out of their way to pay attention to community feedback, gather information on the features that were most needed, and writing a truly elegant implementation of this library.

Many of my readers know that I am a big fan of the library's grid components. So, one of the first things I did was take a look at the changes in implementation. I went to the samples page, and began poking around. One of the first things I hit upon was their plugin samples, specifically the first example which showcased a RowExpander plugin. This worked right on the lines of something I had wanted to do with a recent project, so I dived in head first to get a look under the hood to see what was going on.

The example didn't include a dynamic dataset, but an array implementation. The contents of the 'expanded row' were taken from additional value that was 'pushed' into each record's array. This was...OK, but I was looking for a way to dynamically populate this area, and only if and when I needed that drill down capability. Being a plugin, I decided to explore modifying it to serve my own purposes. Basically, I wanted something similar to a cell renderer. I wanted to pass in a new option, remoteMethod, to which I would assign a function reference. Upon row expansion, the area would be prepopulated with a new div, dynamically given an ID, 'rem' + the row index. After this element was created, the script would then call the referenced function, passing the record and the row index back to the referenced function. From there it was up to me. In my RowExpander Example, I used JQuery to make an Ajax call to a page, passing it's contents back into the dynamically created div element. It's a simple example, but one that can definitely be built upon.

One of the best things about my example, for me, is that it only takes about 10 lines of additional code (top end) to add the functionality. I am not a JavaScript whiz kid, by any means, but it was very simple to expand upon the framework that was already in place. It goes a long way in showing what a superior job Jack Slocum and the ExtJS crew have done with this latest version of the framework. I only hope that Adobe will update the new Ajax components they included in ColdFusion 8 (most built with ExtJS 1.1) as soon as possible.

You can view my RowExpander Example, and you can download the sample code from the link below.