ColdFusion Development Blog by Scott Bennett - JavaScript

CFWindow scrollIntoView

Mon, 10 Nov 2008 03:30:00 -0400

Leon asked:

"I wondered if you know of a way to control the scroll position of the contents in a cfwindow? Do you know if there's some ext api function or property that can be used sort of like the JS scrollIntoView() type function, but applies to the ext window?"

The solution to the problem can be seen in the cfWindowScrollIntoView() function I created below [More]

CFGrid: Disable the Right Mouse Click Event

Wed, 22 Oct 2008 20:39:00 -0400

Willis asked:

"Do you know how to disable or turn off the right mouse click menu for cfgrid?"

This is actually pretty easy, all you need to do is set up a listener on the contextmenu event and have the listener cancel the event. Here is the code (click here to try it): [More]

Workaround for CFInput DateField + CFDiv + Internet Explorer Glitch

Wed, 25 Jun 2008 21:04:00 -0400

A while back I blogged about a div layer positioning glitch that occurs in IE when you position a cfinput datefield above a cflayout or cfdiv generated div layer. This problem seems to be cause by the fact that in IE, a relative positioned element influences the stacking order of it's child-elements, which violates the CSS specification, but who really needs standards anyways right? Well, I figured out a way to workaround it, and it's really stupid that I didn't think of it before. I kept trying (unsuccessfully) to write a JavaScript function that would find the layers and reposition them after the page loaded, when finally a light bulb went on in my head, and I came up with a much simpler solution. [More]

CFWindow as Image onMouseOver Enlarger/Pop Up

Fri, 30 May 2008 19:29:00 -0400

In a comment on a previous post I wrote about Enhancing CFWindow with JavaScript, Ebenezer asked the question:

"CFwindows is quite nice, but i need it to behave in a particular way. I want to remove the frame and the (x) close button. I want to use cfwindow to just "display the bigger size of an image on mouseover and close on mouse out. Anyone with an idea."

Below is an example of how to remove the toolbar and borders from the cfwindow and display the large image when you rollover the thumbnail. [More]

Reposition A CFWindow From Center

Tue, 22 Apr 2008 16:29:00 -0400

In a comment on a previous post I wrote about Enhancing CFWindow with JavaScript, Nathan asked the question:

"I like the center feature but if you want to move the window to a little below center what function do you call to center then move it down 20 px?"

The answer is to use the Ext.BasicDialog.center() function, then get the windows Ext.Element object using the Ext.BasicDialog.getEl() function. The Ext.Element object has the getX() and getY() methods, which will give you access to the windows X and Y coordinates. You can use those, in combination with the Ext.BasicDialog.moveTo() function, to move the window to your desired position relative to the center. [More]

Google Maps API in a ColdFusion Custom Tag

Fri, 18 Apr 2008 19:04:00 -0400

At last nights Orange County ColdFusion Users Group meeting (occfug.org) I presented on the topic of integrating the Google Maps API into a ColdFusion application. I made a custom tag for the presentation that generates a Google API powered map, and I am posting it here for all the people that wanted access to the source code. [More]

CFWindow with a Minimize / Maximize button

Tue, 11 Mar 2008 19:42:00 -0400

Michael Asked:

"Is there any way to add a minimize button to a CFWindow? "

As a matter of fact, the Ext.BasicDialog object that powers the CFWindow tag does have a "collapsible" configuration option. However, Adobe did not add that as an attribute in the CF8 implementation of CFWindow. They currently have it hard-coded so that all CFWindow generated dialogs are set to "collapsible:false". Hopefully they will add a collapsible attribute to the CFWindow tag in some future release, but until then, adding the Minimize/Maximize button onto the CFWindow tool bar is a fairly painless job with the snippet of JavaScript that you can find below. [More]

CFGrid: Disabling the Selected Row HighLighting

Tue, 11 Mar 2008 09:00:00 -0400

I was working on a project the other day that was using CFGrid to manage some data and there was a button on each row to perform a certain action. However, we didn't want the background color of a row to change when the user clicks on a row or on the button. I created this little javascript that adds a listener to the "beforerowselect" event in the underlying Ext.grid's Row Selection Model and cancels any row selections, preventing the row from being highlighted. [More]

CFWindow Event Listeners

Wed, 30 Jan 2008 15:47:00 -0400

The CFWindow tag is built using the Ext.BasicDialog object. This object has several public events that you can add listeners to. You can use the Ext.BasicDialog objects on() function to add listeners to these events that will fire a specific function when the specified event occurs. You can program the listener functions to react as necessary to the various events. Here is a list of the events that you can set up listeners for: [More]

Session.cfc

Wed, 23 Jan 2008 16:52:00 -0400

In a previous post I created a CFC to save simple variables into the session scope. In that CFC I had set up two functions, "SetSessionVar" and "GetSessionVar". However I ended up only needing the "SetSessionVar" function for my example so I never really tested the "GetSessionVar" function. Someone asked me today how to invoke it, and that is when I realized there were a couple little problems that I needed to fix. [More]

JavaScript to Dynamically Change the Dimensions of a CFWindow

Wed, 23 Jan 2008 14:43:00 -0400

In a previous entry I demonstrated how you can use the underlying Ext framework to enhance your CFWindow. And then Matt left a comment asking if it was possible to dynamically resize the CFWindow. The answer is yes and it's quite easy actually. The CFWindow utilizes the Ext.BasicDialog object which has a function called setContentSize, which resizes the dialog to fit the specified content size. [More]

JavaScript to Identify Current CFWindows

Thu, 20 Dec 2007 15:12:00 -0400

A couple weeks ago I wrote a post on Enhancing CFWindow with JavaScript, and it was recently asked if there was a way to identify all the windows and their visible status that currently exist on a page where you are using the ColdFusion.Window.create function to create new CFWindow instances. It took a few minutes of digging with FireBug, but I found that there is a ColdFusion.objectCache object that holds information about the various ext object that get created with the ColdFusion AJAX features. I created a function that loops through the objectCache and finds objects that have a "cfwindowname" property. Then used the Ext.BasicDialog.isVisible() function to determine if the window is currently visible. [More]

Using Ext.QuickTips to Enhance Your Tooltips

Wed, 05 Dec 2007 14:12:00 -0400

The Ext.QuickTips functionality provides attractive and customizable tooltips for any element. Adobe didn't add any QuickTips functionality to ColdFusion 8, but the JavaScript files to support it are included with the other Ext related files in the "CFIDE/scripts" directory, so I am going to show you a couple simple ways you can utilize them to enhance your tooltips. [More]

CF8 AJAX Features: Enhancing CFWindow with JavaScript

Tue, 04 Dec 2007 15:16:00 -0400

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. [More]

CFLayout Type="tab" - Saving Multiple Tab Layout States In Session

Mon, 03 Dec 2007 13:55:00 -0400

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. [More]