ColdFusion Query Json Custom Data Reader For ExtJS

Adobe's implementation of JSON return for ColdFusion is great, and frustrating. They use a non-standard return in that, instead of the expected name/value pairs, they return first a COLUMNS element, listing the column names only once, and then the DATA array of the record set values. The column names are listed in the order with which the data is listed in each array element. This is great, in the fact that the data packets are much smaller than the traditional return (traditional meaning, that which is returned by most other app servers), but the down side is, it isn't traditional.

John Wilson wrote a custom Data Reader for the Ext JS library, to help with parsing the ColdFusion return. However, although it created records within a Data Store, it didn't handle the column aliasing you are usually capable of when defining fields, nor did it properly cast variables as it should. I finally had a chance to run it through Firebug, and step through the process, at which point I also really had a chance to review the custom extension.

While it worked, it really wasn't using the best tool for the job. The extension extended the Ext.data.DataReader base component. The ColdFusion return basically gives you an Array of records (the DATA), and Ext JS already provides an Ext.data.ArrayReader object that extends the JsonReader. So, after some refactoring and general tinkering, I now release the CFQueryReader custom Ext data reader.

Inspired by the CFJsonReader, originally writtin by John Wilson (Daemach).

This Custom Data Reader will take the JSON return of a ColdFusion Query object, rather returned straight up, or via the ColdFusion QueryForGrid() method.

The CFQueryReader constructor takes two arguments @meta : object containing single key/value pair for the 'id' of each record, equating to the 'mapping' of the column @recordType : field mapping object

The recordType object allows you to alias the returned ColdFusion column name (which is always passed in upper case) to any 'name' you wish, as well as assign a data type, which your ExtJS app will attempt to cast whenever the value is referenced.

ColdFusion's JSON return, for a ColdFusion Query object, will appear in the following format:

{"COLUMNS":["INTVENDORTYPEID","STRVENDORTYPE","INTEXPENSECATEGORIESID",
"STREXPENSECATEGORIES"],"DATA" :[[2,"Carpet Cleaning",1,"Cleaining"],
[1,"Cleaning Service",1,"Cleaining"]]}

The ColdFusion JSON return on any query that is first passed through ColdFusion's QueryForGrid() method will return the object in the following format:

{"TOTALROWCOUNT":3, "QUERY":{"COLUMNS":["MYIDFIELD","DATA1","DATA2"],
"DATA":[[1,"Bob","Smith"],[6,"Jim","Brown"]]}}

The Ext.data.CFQueryReader is designed to accomodate either format automatically. You would create your reader instance in much the same way as the CFJsonReader was created:

var myDataModel = [
    {name: 'myIdField', mapping: 'MYIDFIELD'},
    {name: 'data1', mapping: 'DATA1'},
    {name: 'data2', mapping: 'DATA2'}
];

var myCFReader = new Ext.data.CFQueryReader({id:'MYIDFIELD'},myDataModel);

Notice that the 'id' value mirrors the alias 'name' of the record's field.

The CFQueryReader is available from the below download link. Anyone having any issues just post a comment. You may also find information on the Ext JS Forum Post.

Related Blog Entries

TweetBacks
Comments
json tutorial's Gravatar good tutorials
# Posted By json tutorial | 11/27/08 7:03 AM
Peter Kellner's Gravatar Great Book! You said "let us know what you think". Can't find your email or contact to let you know :(
# Posted By Peter Kellner | 12/4/08 10:53 AM
Michael White's Gravatar I don't see the download link. I am going through the Learning ExtJS book and I just got to the database-driven ComboBox and I need to supply my data through a coldfusion query.
# Posted By Michael White | 1/11/09 10:44 AM
Michael White's Gravatar found the download link in the ExtJS forum post. for some reason I didn't see your post to the topic the first time but the second time I went there it was right in front of my face...
# Posted By Michael White | 1/11/09 11:05 AM
Michael White's Gravatar I see in your example, and in the header comments of the CFQueryReader.js that you call CFJsonReader, is that right? it looks like it should be CFQueryReader
# Posted By Michael White | 1/11/09 11:30 AM
Michael White's Gravatar Maybe I could beg you for a couple of quick tutorials that integrate ExtJS, your customer CFQueryReader and a form sample or two from the book... ??
# Posted By Michael White | 1/11/09 12:59 PM
Steve 'Cutter' Blades's Gravatar @Michael - Yes, the book uses the CFJsonReader. Right after finishing the book I created the CFQueryReader to address the CFJsonReader's shortcomings. I've written a follow-on article for the Packt site, but they haven't posted it yet. I'll try to find a copy that I could pass to you. BTW, that is a typo in this post, using CFJsonReader. Thanks for the heads up, I'll go ahead and correct it.
# Posted By Steve 'Cutter' Blades | 1/11/09 3:33 PM
David McGuigan's Gravatar Quick question Steve. I just set up and am using the CFQueryReader reader and love it. My question is, what purpose within Ext grids or whatever does providing the id/primary key serve? Is there some special functionality? What happens if I have a composite key? Thanks!
# Posted By David McGuigan | 1/19/09 6:32 PM
Steve 'Cutter' Blades's Gravatar @David -

You know, I've never tried a composite key within this. The reader's "id" attribute is strictly to provide the store with a unique record identifier. For instance, I have a table for States where my primary key is actually the state's abbreviation [a CHAR(2) field], which is the "id" I give to the reader.
# Posted By Steve 'Cutter' Blades | 1/21/09 12:52 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.9.3.006. Contact Blog Owner. Layout inspired by bluerobot.com., with some JQuery thrown in for fun.