Ext Custom Data Reader for ColdFusion: More Info
Feb 13
posted by Cutter in
ExtJS, ColdFusion, Development, ColdFusion 8
| 10 Comments
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.
. You can learn more about me in the 
#1 by Wayne Pankey on 2/17/09 - 3:08 PM
#2 by Steve 'Cutter' Blades on 2/17/09 - 3:19 PM
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'}]
#3 by Wayne Pankey on 2/24/09 - 10:18 AM
#4 by Steve 'Cutter' Blades on 2/24/09 - 10:54 AM
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...
#5 by Wayne Pankey on 3/3/09 - 1:16 PM
#6 by Steve 'Cutter' Blades on 3/3/09 - 1:53 PM
On your other question I'll ping you off blog.
#7 by Justin Carter on 3/8/09 - 8:35 PM
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?
#8 by Steve 'Cutter' Blades on 3/8/09 - 10:00 PM
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.
#9 by Justin Carter on 3/9/09 - 7:55 PM
#10 by Steve 'Cutter' Blades on 3/9/09 - 10:17 PM