CFQueryReader Update: Support for ExtJS 5 and ColdFusion 11

Due to a donation from Bruce Lomasky (thanks Bruce), I've written a new CFQueryReader for ExtJS 5. CFQueryReader is an Open Source project, available on GitHub, that I began years ago to create a proper reader for parsing Adobe's native ColdFusion query JSON return format into something usable by ExtJS data stores. As ExtJS has changed over the years, I have updated the reader to accommodate new versions. But, I don't do much ExtJS development anymore. It's a great front-end app development framework, but I've changed jobs a few times since co-authoring the first books on the library, and just don't work with the technology on a day to day basis anymore. Bruce had a need, and offered to pay for the development of an updated reader. So I dove back in to the ExtJS pool, to help him fulfill his requirements and put a new reader out there.

ExtJS went through a major rewrite between versions 3 and 4, requiring an entirely new direction. While much is backward compatible, in the move from version 4 to version 5, there were some big changes to ExtJS' data packages. Sencha has always done a good job with creating a rich, dynamic framework for web application development. I have always been impressed with their commitment to improving the product, continuously modernizing the framework, and creating more of a "software craftsmanship" approach to web application development. That said they haven't always done such a great job with ensuring an easy upgrade path for developers. Changes to their data package completely broke some of the use cases of CFQueryReader, requiring some refactoring to accomadate.

And that's OK. Sencha's changes to their data packages are some welcome changes, especially for our little plugin. In all of the past revisions of CFQueryReader, we've extended a base Array Reader class, and written an override method of the core readRecords() method. While this worked, it was really kinda kludgy. What we really needed was a way to transform the incoming data packet prior to the reader really processing the object. With ExtJS, we now have that ability to do just that.

ExtJS 5 introduced a new configuration option for data readers: transform. This new configuration attribute takes a function within which you can manipulate the return data of a store's ajax request prior to the reader actually processing that data. This gives some underlying flexibility that wasn't really there before, especially when using Ext.Direct, but for now you really just need to know the basics.

ColdFusion upper cases object keys when it serializes to JSON. If you are manually creating the structure, there are ways to fix that:

view plain print about
1var myStruct = {
2 "key1": "some value,
3 "Key2": "this one is cased differently",
4 "differentKey3": "this one is more different"
5 };

This is fine, and helps a little bit, but ColdFusion creates an object when it serializes a ColdFusion query object, and you can't control it's casing:

view plain print about
1ColdFusionJson = {
2 COLUMNS: ["KEY1","KEY2","DIFFERENTKEY3"],
3 DATA: [
4 ["some value","this one is cased differently","this one is more different"]
5 ]
6 };

When you build your reader configurations, we no longer worry about this casing, as we will do a case insensitive matching of keys during the pre-process:

view plain print about
1reader: {
2 type: "cfquery",
3 rootProperty: "myQuery",
4 totalProperty: "totalCount"
5 }

NOTE: We will lowercase column names during preprocess, and you should remember that when creating your "dataIndex" attributes of your Model's Field configurations.

CFQueryReader will read ColdFusion query JSON serializations that are:

  1. The root of your return
  2. Nested within a larger return object (struct)
  3. Have been converted with ColdFusion QueryForGrid (not suggested, but supported)

And, because ColdFusion 11 includes the new "struct" type for the queryFormat parameter (even as an argument of your ajax request), CFQueryReader will properly parse that as well.

And, since we can now process the return prior to ExtJS calling it's internal readRecords() method, CFQueryReader no longer extends Ext.data.reader.ArrayReader as it's base class, but the more appropriate Ext.data.reader.JsonReader instead, allowing for a more native access approach under the hood.

I've made the new plugin available, for now, within the Ext5 branch of the repository. If you have the need, take it for a spin, and let me know if there's anything that might require tweaking.

CFQueryReader v2.1: Now with metaData support

The Sencha guys just keep upping the bar, and Ext JS 4.1 is no exception. I've been reading Loiane Groner's Ext JS 4 First Look, to review it, and continually find new, cool stuff. 4.1, however, takes it even further. While upgrading CFQueryReader, I was working with 4.1 RC2. And, while extending the base classes, I came across a new feature that wasn't fully documented yet: adding metaData to a server-side store response for changing configuration on the fly. Sometimes it would be nice to just...change up. Now that 4.1 is fully released, I had to make sure that this worked in CFQueryReader.

So, last night I sat down and hammered out this functionality. It took a lot more than I realised, and I learned a lot more about the Ext JS internal code, but I think CFQueryReader is better for it. Consider the following ColdFusion method:

view plain print about
1/**
2 *    FUNCTION getWithMeta
3 *    This function returns the ColdFusion Query object as part of a struct object.
4 *
5 *    @access remote
6 *    @returnType struct
7 *    @output false
8 */

9function getWithMeta(numeric pageIndex = 1, numeric pageSize = 50, string sort = "", string search = "") {
10    var retVal = {"success" = true, "pageIndex" = ARGUMENTS.pageIndex, "pageCount" = 0, "recordCount" = 0, "message" = "", "getEntries" = "", "metaData" = {"root" = "getEntries", "totalProperty" = "recordCount", "successProperty" = "success", "messageProperty" = "message", "idProperty" = "id", "fields" = []}};
11    StructAppend(LOCAL.retVal, GetEntries(argumentCollection: ARGUMENTS), true);
12    var colArr = ListToArray(LOCAL.retVal.getEntries.columnList);
13    LOCAL.retVal.metaData.fields = [
14        {"name" = "id", "type" = "string", "mapping" = JavaCast("int",0)},
15        {"name" = "title", "type" = "string", "mapping" = JavaCast("int",3)},
16        {"name" = "posted", "type" = "date", "mapping" = JavaCast("int",2)},
17        {"name" = "views", "type" = "int", "mapping" = JavaCast("int",1)}
18    ];
19    return LOCAL.retVal;
20}

I reused my getEntries method, to get my query. Here, I'm creating a metaData object, at the root of the return, to define the dataset. Configuration options that I normally define client side (root, totalProperty, etc) I put in to the metaData key. When the response is received by the client, the reader will pass this metaData in to our app, applying this configuration to our reader, store, model, and so on. In the above method, we let the metaData map our columns to fields, rather than doing it client side (CFQueryReader will automatically skip the column mapping if metaData.fields is present in the response.) Our client side store might now look like this:

view plain print about
1Ext.create('Ext.data.Store', {
2    storeId: 'entryStore',
3    model: 'Entry',
4    remoteSort: true,
5    proxy: {
6        type: 'ajax',
7        url: '/com/cc/Blog/Entries.cfc',
8        extraParams: {
9            returnFormat: 'json',
10            method: 'getWithMeta'
11        },
12        limitParam: 'pageSize',
13        pageParam: 'pageIndex',
14        sortParam: 'sort',
15        reader: {
16            type: 'cfquery'
17        }
18    },
19    autoLoad: true
20});

A full example of this, in action, can be seen on a demo page of the CFQueryReader site. The full source code, of the example, can be found in the CFQueryReader GitHub repository.

Ext JS 4.1 Grid: Part1: Basic Config

Many moons ago, I wrote a series on My First Ext JS Data Grid. It was very popular. In fact, it got me the gig co-authoring two books on Ext JS and spawned an open source project targeted at integrating Ext JS with ColdFusion. But, I did that series back in 2007, using Ext JS 1.1 (maybe?), and an update is long overdue.

[More]

CFQueryReader 2.0: Site and Demo Updates

Note: I mistakenly posted this under the wrong title. I must get more sleep ;)

I finally got around to a major overhaul of the CFQueryReader site, including all new demos and documentation of the latest build for Ext JS 4.x.

The new demos for Ext JS 2.x and 3.x include links to legacy API's for both versions of the library. The 3.x version includes an example of using Ext Direct, and the new 4.x demo includes paging data grids.

(Big thanks to Loiane's Ext JS 4 First Look, which showed me very quickly how dead simple Ext JS grids and data stores have become.)

I have not yet tested CFQueryReader with Sencha Touch, but it should work. Any feedback just let me know.

Ext JS 4 and ColdFusion: CFQueryReader 2.0

Wow! It's been too long. I've been so buried playing with new stuff I haven't had much time to write about it. Time to rectify that.

My position over the last year and a half hasn't required me to use Ext JS. And without a project I really haven't had much time to dive in to Ext JS 4. But, I am reviewing Loiane's Ext JS 4 First Look right now, and decided the simplest way to get in was to apply what she was telling me. I knew some of the basics, but Ext JS 4 is a big change, and Loaine's book quickly helped me to grok differences in the class model, updates to the data api, and more. In no time at all I had completely rewritten CFQueryReader, for parsing the native JSON return of a ColdFusion query object. I need to verify, but I'm fairly certain there are more lines of comments than there are code, in the new file. And it is wicked simple. First, include the js file, then define a record of data:

[More]

New Book: Learning Ext JS 3.2

I've been pretty busy this year, starting with my new position at work. And, having worked on major side projects the last three years running, I also took my after work time to spend some overdue quality time with my family. But, I did make time to work with Shea, Colin, and new author Nigel White, to work on the second edition of our Ext JS book, now titled Learning Ext JS 3.2. Released last Monday by Packt Publishing, our latest book brings Ext JS developers up to date in working with the 3.x framework, updating the content to cover many changes to the library as well as introducing several new chapters on key bits about Menus and Buttons, Plugins, Charting, and Ext.Direct.

Sencha (formerly Ext LLC) released Ext JS 3.3 on the same day that Learning Ext JS 3.2 shipped from Packt. There are several new and exciting features added in 3.3, but the core content of the book still aligns with the core of the framework itself, giving developers the tools and information they need to get off the ground running. There were several important changes to the framework between the last book (finalized just before the release of 2.2) and this one, and it was important to get that information out to those ready to learn. In the new chapter about Ext.Direct, I dissect the ColdFusion Server-side Stack, written by Sencha's Aaron Conran, to give the bare bones info needed for writing one's own server-side data marshalling services, going through the pieces step-by-step. Changes to the Data package were just one of the reasons to write this book. I know that Colin, Nigel, Shea, and myself, hope that everyone enjoys our latest work.

My CF + ExtJs Preso for cf.Objective() 2010

ColdFusion + ExtJsAttached to this is my slide deck and sample code from my ColdFusion + ExtJs presentation here at cf.Objective() 2010. Overall it seemed to go really well, despite the typical technical difficulties, and though Ray said I needed to be a little more introductory (Thanks Ray. I appreciate the feedback.) I heavily commented the JavaScript in my source code, so hopefully that will help to fill in the gaps for people. If anyone has any questions, feel free to use the contact link at the bottom of the page.

I want to shout out to Aaron Conran of ExtJs, for providing me with a license for their new ExtDesigner to giveaway in my presentation. I pinged him last minute on this, and he really came through (Hope you like it Lance. Drop me your info to give back to Aaron.) For those who haven't checked it out yet, it's a fantastic tool, really well done, and more than worth the small price tag on it.

On a side note, I'm using a "work-in-progress" version of CFQueryReader in this sample. I'm in the process of refactoring to support some advanced features of Ext.Direct, and the new version will only be compatible with 3.2 and above. When I put it into SVN I'll add some notes on which revision is the cutoff for previous versions of ExtJs.

Update: I've added notes to the readme.txt file of the sample download with instructions on how to make the examples work in ColdFusion 8 as well.

CFQueryReader v1.2 - Critical Update Supporting ExtJS 3.x

I have updated CFQueryReader, addressing issues that had arisen with new builds of ExtJs 3.x. This new build should cover sporadic issues with loading a new Ext.data.Store. There is also a simple example of using Aaron Conran's DirectCFM Ext.Direct ColdFusion API stack.

The CFQueryReader Example Site has been updated as well. You can update CFQueryReader from RIAForge.

Ext Js 3.0 is Finally Released!

Yes, Ext Js 3.0 has finally arrived! This long awaited update to the popular library has finally hit the download page as a production ready build (though the Release Candidates have been pretty stable as it is). There are many great enhancements to Ext, including an even more consistent underlying model (how could it get more consistent?), and some exciting new data marshalling features.

A quick perusal of the updated Samples & Demos page gives us immediate insight into some of the new features that are available:

There's a lot more that you'll have to dig to see, like improved browser support, a better container model, and (experimental) ARIA support (for accessabiltiy). Some of the greatest enhancements come in the way of the data marshalling capabilities added via the new Ext Direct. With Direct, Ext is providing the remoting specifications so that anyone can write data marshalling services around their favorite backend language. Ext has even published Example Server Side Stacks as a jumping off point to beginning with data marshalling via Direct. [Side Note: Aaron Conran, the team lead on the Ext Js team, is a long time ColdFusion guy, and he wrote the example CF stack.) By configuring your Direct API, you can utilize data readers and writers (they're new!) easily, even passing multiple requests within a single Ajax request. [Another Side Note: CFQueryReader is fully functional with and without Direct.]

One of the nicest features of this release is the backwards compatability. There are little to few changes that most will have to make, to upgrade their applications from 2.x to 3.0. And, it was announced, on a recent User Group Tour stop, that Adobe is including Ext Js 3.0 in ColdFusion 9. This opens up the possability of some very nice, new CFAjax components to come.

All in all a fantastic release. I've had the opportunity to play with 3.0 for a while now, watching the SVN updates daily, and my hat's off to the Ext Js crew for another excellent release.

CFQueryReader v1.1

A while back, Justin Carter contacted me about some updates he was making to the ColdExt, a wrapper for the Ext JS library for ColdFusion. He had been looking at my CFQueryReader, as a reader for ColdFusion's JSON data return, and had noticed that there was no support for the 'root' attribute that's associated with most JSON readers in Ext. CFQueryReader is specifically designed for use with Query objects of ColdFusion 8's native JSON return type.

When I first wrote CFQueryReader, I was replacing the CFJsonReader with something better suited to the array structure used in the ColdFusion JSON return of a Query Object, and really did a one-for-one port. So, I took a deeper look at the issue Justin wanted resolved.

I did a deep comparison of Ext's ArrayReader and JsonReader source code, following everything that was being accomplished. What I found was how it used an internal accessor method to pull certain information on demand. I was able to refactor the reader to now support all of the base level meta attributes that are currently available to the ArrayReader: id, root, successProperty, and totalProperty.

In the previous version of CFQueryReader, when defining your fieldsets you were also required to uppercase the entire value of the column names. This is no longer a requirement either, although casing is important in identifying your 'root' and 'totalProperty' attributes.

The download below includes the reader, as well as some sample code showing how to implement it. I also setup these sample in a subdomain to show it working (requires Firefox with Firebug for full effect). There is a fair amount of comment documentation directly within the CFQueryReader.js file. A big shout out to Justin, Adam Bellas, and a few others, for helping me out with the testing.