<cfsilence>

Sexy ColdFusion 8 Ajax

Posted At : February 13, 2008 3:44 PM | Posted By : todd sharp
Related Categories: ColdFusion, Ajax

Many folks have asked recently how I worked around the - umm - 'plain' look of the ColdFusion 8 Ajax controls. I originally planned on that being a part of my cf.Objective() Ajax presentation, but what the heck, I may as well show it now.

It's actually quite simple. Ext ships with several 'themes'. To use these with your Ajax controls, just include them on your page.

For the 'aero' theme:

How 'bout a Vista theme?

A few words of caution though. The first caution is to make sure you have all of the latest hot fixes applied for CF 8. There is a fix in one of them that makes sure your user included stylesheets are included after the CF added ones. This is important! (A workaround is to write your stylesheet to the <head> with <cfhtmlhead> - that should put your sheet after the CF stuff). The other thing to watch out for is to make sure the path to the necessary images is not altered (if you move the theme to your project directory instead of pointing at /CFIDE). If you don't maintain the image path, then you will need to change the path in the local stylesheet (and move the images local to your project).

Comments (11) |

Print |

Send |

Code |

del.icio.us |

Linking Blogs | 4383 Views

Comments

[Add Comment]

Todd: Great tip. I gave this a try and ran into a small difference. My custom css files start with a 'y' rather than an 'x' - so I had my src attribute to the link tag look like this:

/CFIDE/scripts/ajax/ext/resources/css/ytheme-aero.css

Not sure why - I think it ships as an X when you download Ext off their site. But thought I would point this out in case anyone else runs into the same thing.

# Posted By Brian Love | 2/13/08 5:04 PM

Did you perhaps have the issue that I mentioned about your stylesheet being included before the CF stuff?

That can produce some weird looking styles...

# Posted By todd sharp | 2/13/08 5:24 PM

@Todd: Nope, no problem there. My server is running CF 8,0,0,176276 - which I am pretty sure has the latest update (Hot Fix 2).

Like I said, the only difference was that I had to include the stylesheet with a leading 'y' instead of an 'x', such as 'ytheme-aero.css'. Also, my installation is running on a centOS server - maybe that has something to do with it ??

# Posted By Brian Love | 2/14/08 10:14 AM

I have CHF 2 also but the theme thing isn't working for me. I currently have the following in my <head> section: <link href="/CFIDE/scripts/ajax/ext/resources/css/ytheme-slate.css" rel="stylesheet" type="text/css"> and I renamed the stylesheet to ytheme-slate.css (I think this is a Ext 2.0 theme though)
I checked the paths and they are right.

# Posted By Michael White | 2/14/08 1:27 PM

if i change to ytheme-vista.css it works fine... maybe the Ext 2.0 themes need some modifications to work with CF8

# Posted By Michael White | 2/14/08 1:33 PM

I haven't tried the Ext 2 themes, but it looks like Dan Vega has. Might want to post a comment over there to see how he did it?

http://www.danvega.org/blog/index.cfm/2008/2/13/Ex...

# Posted By todd sharp | 2/14/08 3:22 PM

oops i see you commented there.

# Posted By todd sharp | 2/14/08 3:24 PM

I think he's using his cfExt stuff

# Posted By Michael White | 2/14/08 3:57 PM

Ah ok. Well, just make sure if you find a theme somewhere that you want to use that it is compatible with the version of Ext that ships with CF.

# Posted By todd sharp | 2/14/08 4:49 PM

I just can't get it to see the different theme's it always defaults to the base theme. I have applied the latest update for cf8 and here is the code to include it... it shows up, but it does not change the theme.

<cfsavecontent variable="stylesheet">
<link href="/CFIDE/scripts/ajax/ext/resources/css/xtheme-aero.css" rel="stylesheet" type="text/css">
</cfsavecontent>
<cfhtmlhead text="#stylesheet#" />

any help would be appreciated.

# Posted By shane | 3/17/08 12:16 AM

Do you have a demo online somewhere that I can see shane?

# Posted By todd sharp | 3/17/08 3:54 PM

[Add Comment]