Saturday, September 8th, 2007

Ajaxian Featured Tutorial: Extending ColdFusion’s Ajax and UI capabilities

Category: Ajax, ColdFusion, Sencha

Now that ColdFusion 8 has a bit of built-in Ajax and UI controls, its time to show CF developers some love by dropping a quick set of tutorials into the hopper for them. Something that a lot of CF developers don’t know is that many of these new UI controls are based on the Ext framework and thus, are substantially more powerful than what Adobe has outlined in their documentation.

Raymond Camden and Todd Sharp are both keenly aware of this and have started churning out some nice postings which discuss techniques for extending past the canned functionality.

We’ll start this off with Raymond’s nice post about adding custom renderers to ColdFusion’s CFGRID control.

Well imagine you have data being fed into the grid that you do not have control over. For example – perhaps you have price information that isn’t formatted nicely. Turns out Ext has a set of built in formatters that you can apply to grid columns, one of them being a money formatter. What if you have some other logic? Maybe you want to flag a price that is lower than 10 dollars? Again, using the Ext API, you can write your own formatter just for this purpose.

Raymond leverages Ext’s built-in “usMoney” renderer to format one of the columns in currency format while applying a custom renderer to the second column for more granular control of the data’s appearance.

myf = function(data,cellmd,record,row,col,store) {
if(data == “Product 4”) return “” + data + ““;
else return data;
testgrid = function() {
mygrid = ColdFusion.Grid.getGridObject(‘data’);
cm = mygrid.getColumnModel();
cm.setRenderer(0, Ext.util.Format.usMoney);

For a quick peak at the end result, take a look at the demo.

Next up, Todd Sharp shows how to easily filter CFGRID results by leveraging the tag’s data binding capabilities to dynamically refresh the data via Ajax.

Grids are very nice – especially the new Ajax grid in ColdFusion 8. But they can be a bit difficult to quickly get at something that you may know exists. Here is one method to do filtering.

The code below shows the call to bind the grid with the getSearchString() method which returns the value of the input field:

<cfinput name=”searchString” />
<cfinput type=”button” name=”searchBtn” value=”Search” onclick=”ColdFusion.Grid.refresh(‘artGrid’, false);” />
bind=”cfc:art.getArt({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection}, getSearchString())”>

<cfgridcolumn name=”artid” header=”ID” />
<cfgridcolumn name=”artname” header=”Name” />


The demo for Todd’s tutorial can be seen here and the source code is available here.

It’s really great to see the ColdFusion community looking past the basic Ajax and UI capabilities built into ColdFusion 8 and actually taking advantage of the horsepower provided under the hood by the Ext framework.

Posted by Rey Bango at 8:09 pm

3.9 rating from 38 votes


Comments feed TrackBack URI

Wow, nice quick round up of some of those features. I knew CF 8 was using YUI for the calendar widget, but haven’t gotten to experiment enough with the grid yet to check out some of these ideas.

Glad to see Adobe left plenty of room for growth by using standard libraries wrapped in a flexible manner.


Comment by Mike Kelp — September 8, 2007

I don’t wish to harp on this because I love both Coldfusion and Ext, but both examples are using 470kbs worth of javascript (all minified already I think) and css, so unless all of that is running a complete system, not simply one widget added to a page, it generally won’t be a good solution to the problems presented. Maybe on the admin page of a backend, but something to seriously consider before using it.

Or maybe they are simply overloaded by the example authors or cf itself? For example, why is there a 29kb drag and drop script added on the gridtest example when that functinality is not used? Who added that, cf itself?

Why does coldfusion not use the Ext base itself and get rid of YUI? Are there not enough Ext widgets yet, or that option wasn’t available before?

I can’t tell from the minified js which Ext version is being used. Can you tell us?

Is there any way to specify or update the cf js library used? For example when Ext 2 comes out, would be nice to update, though I doubt you can.

Any knowledge of future cf intentions in this area? Would be nice to have some real, useable (quick and light) functionality available rather than just the typical cf “enterprise” approach.


(Need to improve the ridiculous form Spam Question: “What does the X in Ajax stand for?” I said “xmlhttprequest”. Next page told me my post was spam. Reloading now…)

Comment by ziggy — September 8, 2007

Nice to see the CF love. I’m a CF developer and I love AJAX and JS front ends, but the above poster is right. Having Ext built in is nice, but so far I’m unconvinced that using the built in tags are efficient, and/or that I can’t get better results writing the scripts myself. I would point out though that the scripts can be updated manually, as long as the API does not change.

Comment by Jon Hartmann — September 9, 2007

That’s the great thing about CF though… it’s got functionality for all levels of ability. A developer can start with the cfgrid tag, and then if or when the canned approach falls short she can roll her own code and use her own cf_grid tag instead. What cfgrid (and cfinsert/cfupdate etc) does though is it gives the new developer an instant sense of accomplishment that frankly I think is missing from PHP etc.

Comment by Mike Ritchie — September 9, 2007

@Mike Ritchie: I told ya to be patient. hehe. ;)

Comment by Rey Bango — September 9, 2007

Heh, thanks Rey! I started with ColdFusion and even though I’m also using PHP these days (I’m the primary coder for the port of Fusebox 4 and 5 for PHP), I still consider CF my primary programming language.

Comment by Mike Ritchie — September 9, 2007

I want to concur with ‘ziggy’ that these ‘frameworks’ should be reduced in size. Only those functions used by a given page should be part of the page and NOT the entire ‘fat’ framework.

Comment by Patrick Whittingham — September 10, 2007

@Patrick & Ziggy:

The drag/drop is actually used. The grid columns can be rearranged by drag/drop.

Comment by todd sharp — September 10, 2007

I’d also mention that the engineers at Adobe are very conscientious about the file size issue and have assured us that they have done everything possible to keep the size down.

Comment by todd sharp — September 10, 2007

It is little insane for Adobe to use a framework that is being built by one person. Extjs is great work and probably the best JS library out there. As far as I can tell from the website the only individual completely associated with it is, Jack. BTW, I know there are many more people involved (and they deserve more credit) but I am not convinced that if Jack was to be ‘hit by a bus’ (not wishing this on anyone) the extjs would be done for. For example, both Dojo and Prototype have a large group of developers supporting and maintaining the code and the will probably have very long lifespans.

My crumblings could easily be solved by an ‘About Us’ page on the website and maybe a clearer idea of the partnership between Adobe and extjs.

Comment by jake — September 10, 2007

A bit disappointing having to write javascript… I am currently using ASP.NET AJAX and all functions are accessed via a built in webservice which is all C# code – not a single shred of javascript written by me (ASP.NET generates its own). If I am going to use the ColdFusion AJAX I want to write everything in CF (yes it’s java under the hood, but that’s not the point).

Comment by schlub — September 10, 2007


I think you’re missing the point – the ColdFusion Ajax features are extremely powerful and can be used without writing a lick of JavaScript. The article here just points out how some of us are building/extending the built in functionality by tapping into the underlying Ext framework API.

Granted, there is _some_ JS stuff in the ColdFusion repertoire, but the CF API is so easy my 17 month old daughter could probably understand it ;)

For example:

ColdFusion.navigate(URL [, container, callbackhandler, errorhandler, httpMethod, formId])

Could hardly be considered difficult to grasp, wouldn’t you agree?

Comment by todd sharp — September 10, 2007

todd may have well as written “…extremely powerful and can be used without LEARNING a lick of JavaScript…”

AJaX is powerful in part of because it is platform-agnostic. That power is lost or at least diluted when deeply integrated. Also, I don’t look forward to cleaning up the messes left by people thrilled with what they can without learning anything…got enough of that to deal with already…

My ridiculously humble demo site – still the first google result for the search phrase “ajax cfmx soap” – shows integration of AJaX with CF6 – and when the time came only weeks ago to serve as an AJaX domain expert for a large government contract I told them “Sure, we apply AJaX enhancements to your stuff – not like it’s platform depenedent or anything.”

I would not have closed that deal if my response was “Sorry, I only know how to use Coldfusion’s packaged version of AJaX…”

Comment by jtheis — September 13, 2007

Leave a comment

You must be logged in to post a comment.