ColdFusion 8 added the CFWindow tag which creates a pop-up window in the browser, which is not really a pop-up window, but rather it is a div layer that looks like a window and can be hidden and shown via JavaScript. Today, I am going to demonstrate a couple ways you can expand your use of the CFWindow tag by incorporating some JavaScript that interacts with the underlying Ext.BasicDialog object.


A couple weeks ago I posted an entry on how to save the state of selected CFLayout generated tabs on a page. Then it was asked how that example could be expanded to save the state of multiple tab layouts on a page. I have created an example of how to do that below.


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.


Yesterday I blogged about how to create a custom date renderer for CFGrid. Today I am going to add to that example how to validate the data entered into the CFGrid before it is sent to the cfc to update the database. The CFGrid (Ext.grid.EditorGrid) object has an event called "validateedit", which fires after a cell is edited, but before the value is set in the record. We will be adding a listener to that event that will validate the data that is being submitted and, if the data is not valid, display an alert message and cancel the changes.


One of the coolest things about the ColdFusion 8 implementation of the CFGrid tag is that you can do a lot of customization, if you know your way around the Ext objects. I have found several blog entries about using custom renderers with the CFGrid tag. However, could not find a working example of one for date fields, so I decided to build one.


You definitely need your /CFIDE/Scripts directory working properly as of CF8. In previous versions, if you weren't using CFFORM then you really didn't need the /CFIDE/Scripts directory, and many people don't have their virtual directories set up properly and don't even notice. Many shared hosting providers will actually disable the /CFIDE virtual directory as a security precaution (I can't even begin to count how many times I have answered the "Why doesn't my CFForm work?" question on various ColdFusion related forums).

In previous versions of ColdFusion the directory contains 2 files cfform.js and wddx.js. As of ColdFusion 8, the directory contains 1,887 files and 250 folders, and all the AJAX related functionalities require the folder to be accessible.


So I was using the cflayout tag to create a tab navigation system for reporting module. Each tab had a different report based on live data. The problem is that if you are on any tab that is not the default tab and you click refresh or press the F5 key to reload the data, then you get sent back to the default tab.

I needed to find a way to make it so that whenever a user clicked on a tab, their selected tab was saved in the session scope so that if they happen to use their browsers refresh links instead of using the refresh links I provided for them, they didn't loose which tab they were on.


So I was reading through the list of ColdFusion 8 AJAX JavaScript Functions, and I noticed that Adobe actually built in the JavaScript Version of CFDump that I blogged about recently.

If you enable the ajax debugging and browse to your page with "cfdebug" as a url parameter, then you can use the ColdFusion.Log.dump() function to dump the object you are working with into the cfdebug log window. Of course, it still has the same problem with recursion on large objects


I am pretty excited about the new CFMenu functionality. It's by far the easiest interface I've used to create a DHTML/JavaScript/CSS menu. Basically there are two tags, <cfmenu> sets up the basic settings for the menu and <cfmenuitem> us used to build the menu items structure.

You can nest as many <cfmenuitem> levels as you want, however, once you get past 5 levels deep, you start to get noticeably slow page loads. Once you get past 10 levels,


I was developing a report application where I put a cfinput type="DateField" at the top of the page with a series of tabs below it using cflayoutarea, and cfdiv tags in each of the tab areas that are bound to the datefield. Each tab contains a different report related to the sales that occurred on the date that is selected at the top. All the div tags are bound to the datefield, so if you select a new date, the sales reports all refresh asynchronously. It's a pretty straight forward implementation of these new features in ColdFusion 8.

The only thing is that in Internet Explorer if open the calendar on a datefield that is right above a cfdiv layer, the calendar goes under the cfdiv and the links don't work on the portion of calendar that is behind the div layer.

Try this link in FireFox and it works fine, but in IE you will see the problem:

I have submitted the bug (#70618) to Adobe, so hopefully that gets a hot fix relatively soon.

Currently the suggested workaround is to either put a bunch of <br> tags in between, to make sure there is enough space for the calendar above the cfdiv, or put your calendar on the side or some other position that is not above the cfdiv layer.

More Entries

Home | Blog | Contact | © 2001 - 2021 The ColdFusion Guy - Scott Bennett. All rights reserved.