Ask a Jedi: ColdFusion 8 and Ext

Johansen asks what I think is a common question now with ColdFusion 8 and it's Ajax features:

When I look in FireBug's list of included JS-files, and now in the article on Jason Delmore's Blog. It looks like the "EXT JS" library is included in CF8. Maybe it is me, but I have not yet found any documentation on how to use the "EXT JS" in my CF code.

That's because you aren't supposed to - not really anyway. "Ext" is not an official part of ColdFusion 8, it is just how ColdFusion 8 does it's Ajax magic. Now what I just said isn't 100% true. If you look at your ColdFusion Reference (and I hope you have), you will see a whole section on CF/JavaScript stuff called: Ajax JavaScript Functions

This chapter talks about the various JavaScript functions you can use to help you with ColdFusion 8 Ajax development. Some of these functions relate specifically to Ext:

ColdFusion.Grid.getGridObject
ColdFusion.Layout.getBorderLayout
ColdFusion.Layout.getTabLayout
ColdFusion.Window.getWindowObject

Each of these functions will get you access to the underlying Ext objects used to drive the grids, borders, tabs, and windows. On a related note - ColdFusion.Tree.getTreeObject works the same way, but gets a YUI object instead (from the Yahoo library).

So if you do know Ext, you can use these functions to get the objects and call various methods on them. For an example, see my post on custom grid renderers.

Technically you could call this "using Ext", but I don't think it is exactly fair to say you have Ext in CF 8. If I were building an Ajax site from scratch and wanted to use other features of Ext, I would not rely on the libraries that ColdFusion ships and would instead download them direct from Ext instead. It is possible that in future version of ColdFusion, Adobe may switch to a completely new underlying Ajax library. (I doubt it - but...)

Comments (7) Nov 17, 2007 8:39 AM Views: 1998

Comments

[Add Comment]
Since EXT JS is part of CF 8, you have the advantage of using a fairly heavyweight js framework on a ColdFusion 8 server without having to worry about any expensive license issues and a js framework being available using the cfajaximport tag, assuming the site has access to the CFIDE/scripts folder.

Check out some of the grid examples on extjs.com.

http://extjs.com/deploy/dev/examples/grid/paging.h...

The usage examples on the extjs.com site will also help you to understand how the extjs framework works. Just be prepaired to have a bit of a brain freeze when you look at the Ext JS code and then look at the auto-generated CFFORM/CFGRID code.

The only bummer is that the version of Ext JS included in CF 8 is at 1.0 and version 2.0 is available. One of these days I'll have to try upgrading to 2.0 and seeing what breaks in the form ui's.
# Posted By Christopher Wigginton | 11/17/07 9:38 AM
Ray. Thanks for clearing it out.

I knew about the AJAX functions, but did not know that back-end was Ext. I just hoped that Ext was an official part of CF8. And I could make use of all the nice features/functions in the Ext JS, as for example "Drag'n'Drop".
# Posted By Mikkel Johansen | 11/17/07 9:50 AM
I disagree with you Chris. Notice you mention that the version in CF8 is older. Doesn't that right there say you should download Ext yourself if you want to use it?
# Posted By Raymond Camden | 11/17/07 9:50 AM
@Mikkel - well since Ext itself is free, nothing stops you from downloading it and using it. Don't forget too that CF has some very cool ways to help you serve up stuff for Ajax as well, including native JSON support. Did you know that you can take a CFC with a remote method, one that returns query data, and tell it to return the query as JSON by just passing returnformat=json in the url?
# Posted By Raymond Camden | 11/17/07 10:20 AM
At the time Adobe started using Ext as CF's Ajax library, it was actually an extension for YUI, hence why YUI is also included; it used to be called YUI-EXT. Jack then abstracted the API and wrote adapters for various libraries such as jQuery and Prototype. Later, EXT became a standalone library as well, allowing you to extend your existing ones or use it by itself. EXT 2.0 is a huge step and very different than the previous versions.

So here's a suggestion. If you want the quick Ajax functionality for your sites writing very little JavaScript, use CF8. ColdFusion has always allowed to rapid application development. However, if you need to write a desktop-like looking application, and you don't know Flex, then use EXT 2.0.

HTH
# Posted By Rob Gonda | 11/17/07 12:08 PM
@Ray
Sure, using the latest library is the right thing to in most cases (bug fixes, speed improvement), but if what you need is in the older library, it's perfectly OK to use that library.

The problem using the latest library in conjunction with cfform is that the new library isn't guaranteed to be completely compatible with existing cfform and cfajax tags if it hasn't been blessed by Adobe.

Using both libraries is a pain, since in most cases, the last loaded overwrites unless you either rip through the library and fix/adjust the scope.
# Posted By Christopher Wigginton | 11/18/07 8:19 AM
The first Ext thing that I went for was the Tree. It has drag and drop. Unfortunately, while you can drag and drop within the tree, saving the order of the leafs is not really what the Tree is for. There is a treeSerializer class but it was added by a user and is not official. So even Ext 2.0 will have trying to decide between using the really new stuff and staying with the library that has already been integrated. . ....
# Posted By Mark Ireland | 11/19/07 2:35 AM
[Add Comment]