Ext Custom Data Reader for ColdFusion: More Info

I wrote an article for Packt, as a follow up to Learning Ext JS, and was surprised to find it's been on their site for a while now.

The article is a follow up on Chapter 12 on Custom Data Readers in Ext JS, replacing the reader in the chapter with the CFQueryReader, which is better tuned for reading JSON data returns of a ColdFusion Query object.

TweetBacks
Comments
Wayne Pankey's Gravatar Hi Steve. Working my way through your book -great stuff. Question for you: how can I put a form control (checkbox) in the header of a cfgrid?
# Posted By Wayne Pankey | 2/17/09 3:08 PM
Steve 'Cutter' Blades's Gravatar @Wayne,

Please, call me Cuter.

Glad you're enjoying the book. The CheckBox: you can add any form component to the TopToolbar of the grid:

tbar:[{xtype:'checkbox',id:'mybox'}]
# Posted By Steve 'Cutter' Blades | 2/17/09 3:19 PM
Wayne Pankey's Gravatar Many thanks for the response Cutter. I know from reading the book that the solution you posted is pretty straight-forward when working in JS. I'm a little confused to how this would be implemented within the context of ColdFusion.
# Posted By Wayne Pankey | 2/24/09 10:18 AM
Steve 'Cutter' Blades's Gravatar @Wayne -

Sorry, I wasn't clear. You would have to do it all through JS, tapping directly into the underlying Ext 1.1 library. You would create a method which you would reference in the onLoad event of your document:

<body onLoad="myMethod()">

Then you would get a reference to your grid object:

function myMethod(){
var gridObj = ColdFusion.Grid.getGridObject('gridname');
...
}

This gives you your Ext object, ready for manipulation. First you'll get a reference to the grid's HeaderPanel:

...
var gridHead = gridObj.getView().getHeaderPanel(true);
...

Then create a toolbar:

...
var topToolbar = new Ext.Toolbar(gridHead,[{xtype:'checkbox',name:'mycheck'}]);
...

That's the basics. Check out the Ext 1.1 documentation for more in depth information on how to manipulate the cf ajax components:

http://extjs.com/deploy/ext-1.1.1/docs/

Use all of that in conjuction with the ColdFusion JavaScript functions:

http://livedocs.adobe.com/coldfusion/8/htmldocs/he...
# Posted By Steve 'Cutter' Blades | 2/24/09 10:54 AM
Wayne Pankey's Gravatar Cutter, would the above solution replace my existing CF generated toolbar with a new Ext generated one or would it just add the cBox column somewhere? Also, would you be interested in doing some CF/ExtJS training?
# Posted By Wayne Pankey | 3/3/09 1:16 PM
Steve 'Cutter' Blades's Gravatar That would add a checkbox control to the toolbar of the cfgrid created grid. To use a checkbox for a column you want to create an editor grid (which is an option of cfgrid) and define one of your (typically boolean) columns to use a checkbox as it's renderer.

On your other question I'll ping you off blog.
# Posted By Steve 'Cutter' Blades | 3/3/09 1:53 PM
Justin Carter's Gravatar @Cutter: I've implemented your CFQueryReader extension as a tag for ColdExt today but I've found that it's difficult (impossible?) to do paging with. The problem is that you can't modify the recordCount of a CF query (which you would want to do before serialization to JSON, or before letting CF8 handle the serialization natively when returning a query form a remote method) and so the total record count used for paging cannot be set anywhere.

Usually I put the query and totalcount into a struct before serialization, and then on the reader apply the root and totalProperty config options (e.g. root="query.data" totalProperty="totalcount") which makes it easy, however in the CFQueryReader the root (o.DATA) and total property (o.TOTALROWCOUNT) are hard-coded which means I can't use that workaround.

Would you be interested in updating the extension to support the root and totalProperty config items, or do you know of another way to do paging with CFQueryReader that I am missing?
# Posted By Justin Carter | 3/8/09 8:35 PM
Steve 'Cutter' Blades's Gravatar @Justin -

Or, you pass your structure to Ext in the same (or similar) format that CF does if you used the QueryForGrid() function. The reader will accept this:

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

That's the standard CF JSON returnFormat of a query object. Or, you can have that returned as the QUERY key of your struct, along with a TOTALROWCOUNT key:

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

Here are the two things to look for currently, 1) for the TOTALROWCOUNT to be a first child node of the object passed to the reader, and 2) for the QUERY to be a first child node of the object passed to the reader. You could add any other key that you might require elsewhere in your program (I like to add a SUCCESS key).

I really like the idea of passing optional arguments for the query root and totalrowcount though. I might have to take some time to deep dive and see what's required to pass in a config object to the CFQueryReader constructor.
# Posted By Steve 'Cutter' Blades | 3/8/09 10:00 PM
Justin Carter's Gravatar Ahh, I see now, the whole reason QueryConvertForGrid() exists is to make paging easier with the built-in cfgrid. The downside is than using QueryConvertForGrid() for paging means (potentially) returning large record sets from the database server to CF, instead of letting the database server handle the paging and returning a small record set.
# Posted By Justin Carter | 3/9/09 7:55 PM
Steve 'Cutter' Blades's Gravatar Guess that's the good thing about this reader. It expects the same struct format, but you can populate that struct without ever using QueryConvertForGrid() ;)
# Posted By Steve 'Cutter' Blades | 3/9/09 10:17 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.