Ext Themes in ColdFusion 8

02/13/2008 | ExtJS, ColdFusion | 11 Comments

My good friend Todd Sharp asked me to keep this one quiet until his presentation but he blogged about it today so the cat is out of the bag. Ever since ColdFusion 8 came out one thing users wanted to do was change the look and feel for the Ajax components. People have hacked away at the css with no easy answer.

The answer was there all along though. Basically themes in Ext are a css file that point to a different images collection folder. So if you want to change themes simply point to a new css file. If you look in the /CFIDE/scripts/ajax/resources/ext/css folder you should see a a couple themes. The one that all of the Ext examples uses is the aero theme. Simply link the stylesheet in your application and you should be ready to go.

view plain copy to clipboard print about

  ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<link href="/CFIDE/scripts/ajax/ext/resources/css/xtheme-aero.css" rel="stylesheet" type="text/css"> 1<link href="/CFIDE/scripts/ajax/ext/resources/css/xtheme-aero.css" rel="stylesheet" type="text/css">

This is great but it does not stop there. This won't just change windows it will change all of the Ext components in ColdFusion 8. With 1 line your windows, grids, layouts etc.. will take on a nice look. Now let say your like me and you still want more themes. If you head over the the Ext Forums you will find user contributed forums. To use our new themes simply drop the css file in the folder we talked about above and the images folder for the theme under /CFIDE/scripts/ajax/ext/resources/images. I have a quick look at some theme changes below.

 

This entry was posted on February 13, 2008 at 11:00 PM and has received 8501 views. Comments 11 | Print this entry.

 

TweetBacks

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

• #1 by Chris Dawes on 2/14/08 - 1:19 AM

  

  The inside word is that ext-ui.com will soon contain many more themes.

• #2 by Michael White on 2/14/08 - 10:23 AM

  

  I really like the "Slate" theme but can't find it anywhere in the EXT forums. can you help?
  Also, following the path in CFIDE, I have ytheme css files not xtheme, are these the same things?

• #3 by Dan Vega on 2/14/08 - 10:31 AM

  

  I went to the Ext Forum and did a search for slate theme and it came right up, the link is below. The ytheme is the same thing. I think before 1.1 they were still yui-ext and from 1.1 on the were Ext.
  
  http://extjs.com/forum/showthread.php?t=15989&...

• #4 by Michael White on 2/14/08 - 10:34 AM

  

  ok, I did a google search and found the Slate Theme (for Ext 2.0) at http://extjs.com/learn/Ext_Extensions

• #5 by Michael White on 2/14/08 - 12:13 PM

  

  so do I need to upgrade Ext from the default that comes with coldfusion 9 to 1.1 or something? will an Ext 2.0 theme work for 1.1? I haven't been able to get this theme to work so far.

• #6 by Dan Vega on 2/14/08 - 12:28 PM

  

  I keep forgetting that its 1.1. I'll have to double check that. Can you at least pull in the vista or aero theme?

• #7 by Michael White on 2/14/08 - 12:35 PM

  

  yes I can pull up the Vista theme fine

• #8 by Michael White on 2/14/08 - 12:50 PM

  

  cfExt project may have separated you from the lowborn. We're living in the stone age down here.

• #9 by Gerd Suhr on 6/22/08 - 10:28 AM

  

  Dan,
  So has anyone (Todd Sharp?) gotten the 2.0 styles to work with the cf8 1.0 lib? If so could you post the so solution. I think the cf community would greatly appreciate it. Thanks

• #10 by Dan Vega on 6/23/08 - 9:19 AM

  

  Gerd,
  I am pretty sure there is no way to do that in ColdFusion until they update the ext version. All of these styles were for 2.0. Of course if you wanted to give cfExt a look you could use them and give some feedback :)

• #11 by Gerd Suhr on 6/23/08 - 10:33 AM

  

  Yes I've been playing with cfext for a few days now. It's fantastic work and I think you and Justin should continue on with this project. I believe that this is one of the most useful projects out there for CF, especially since CF8 is stuck on extjs1. My question to you regarding CFEXT is navigation. I have not been able to figure out how to navigate with lionks buttons etc. within the various regions, For instance loading a page in the central region from an accordian menu. With cflayout it's as simple as using coldfusion.navigate. My javascript knowledge is very basic so trying to create onClick events has been hair pulling to say the least. The extJS documentation on this is very sparse and disorganized. There are no simple and clear examples of loading data or pages into the various regions.
  If you can show me an example with cfext on how to do this I would be forever grateful. This is the only thing holding me back from using it at this point.