I have blogged a lot about the new AJAX related functionality that comes with CF8, and some of my examples have demonstrated how to utilize the underlying EXT and YUI JavaScript libraries that power these great features. There are 5 functions that ColdFusion provides that give you access to the JavaScript objects, and if you are proficient at JavaScript, I highly recommend you spend some time researching each of the libraries so you can be familiar with how you can customize them to your needs.

If your not familiar with JavaScript, get familiar. More and more attention is being focused on making websites more engaging for users, and knowing how to use javascript to implement AJAX related features is a powerful tool to have at your disposal.

I am going to briefly hi-lite each of the built in ColdFusion JavaScript functions that you can use to access these objects.

ColdFusion.Grid.getGridObject gets the underlying Ext JavaScript Library object for the specified HTML format CFGrid control. If the grid is editable, it returns an Ext.grid.EditorGrid object. If it is not editable, it returns an Ext.grid.Grid object. I have used this to create custom renderers to format data in the grids columns, validate data submitted in an editable grid, manipulate the data in the grid based on users interacting with other elements on the page, but I have only just barely scratched the surface of it's power. The library gives you control of pretty much every aspect of the grid, you could change the selected row, or change the colors, and you can set up listeners to react to any of the events that the grid library offers.

ColdFusion.Layout.getBorderLayout and ColdFusion.Layout.getTabLayout both get the underlying Ext.BorderLayout object for the specified CFLayout control. Most of the useful functionality available for this object is more easily accessible through the other layout related JavaScript functions (ColdFusion.Layout.collapseArea, ColdFusion.Layout.expandArea, ColdFusion.Layout.hideArea, ColdFusion.Layout.showArea, ColdFusion.Layout.createTab, ColdFusion.Layout.disableTab, ColdFusion.Layout.enableTab, ColdFusion.Layout.hideTab, ColdFusion.Layout.selectTab, and ColdFusion.Layout.showTab). However, one good use I found is to save the state of the opened/collapsed areas/tabs in your layout, so that the next time the user logs in, or if the user refreshes the page, their layout stays the same as they left it. You do this by adding a listener so that when ever they select, expand, or collapse an area, it fires a function that does an AJAX call to save that information into a user preferences table or session scope.

ColdFusion.Tree.getTreeObject gets the underlying YAHOO.widget.TreeView object for the specified HTML format CFTree control. I have used this to create a function that changes the selected tree node, and dynamically opens/closes tree branches based on a user interacting with other elements of the page.

ColdFusion.Window.getWindowObject gets the underlying Ext.BasicDialog object for the specified HTML format CFWindow control. I haven't used CFWindow much yet, but I was just reading through the documentation and the "addButton" function caught my eye. It creates a Ext.Button object that looks much like a form button element, and you can create event listener to react to the button being clicked. This could be useful in a lot of situations.

Overall, I really like the way that Adobe gave us an easy to implement solution so that ColdFusion developers that perhaps know very little about JavaScript, can easily add these powerful AJAX solutions to their application, and also gave the developers who are more proficient in JavaScript the ability to get under the hood and really customize these functionalities and take them to the next level.