Warning to Ajax users in ColdFusion 9

This post is more than 2 years old.

I've seen this come up a few times now so I thought I'd whip up a quick blog entry to help spread the word. One of the cooler aspects of ColdFusion 8's Ajax support was that it provided hooks to the underlying frameworks. So for example, when working with CFWINDOW, if you wanted to do something that ColdFusion didn't provide a JS API for, you would use getWindowObject to retrieve the actual Ext object. If you visited the Ext docs, you could then look for the API you wanted to use.

This worked fine - except that ColdFusion 8's Ext library was somewhat old. ColdFusion 9 corrected this and uses the latest (well, as far as I know, maybe Ext is a minor point or two ahead now) version. This means that - potentially - any code you have that made use of the API may no longer work.

Here is an example that came in today - it uses the Grid API.

function initGrid(){ var grid = ColdFusion.Grid.getGridObject('maingrid'); var gridHead = grid.getView().getHeaderPanel(true); var tbar = new Ext.Toolbar(gridHead); ...

This worked fine under ColdFusion 8, but fails in 9. I'm not terribly familiar with the latest Ext, but I'm sure the developer could find a new way of doing what he wanted to accomplish.

Not the end of the world for sure, but something to keep in mind. In general, if I feel the need to go "off the ranch" from Adobe's provided UI controls, I'd just end up using the library's code by itself.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Steve &aposCutter&apos Blades posted on 10/15/2009 at 8:41 PM

You beat me to it. Actually, I was writing an entry on this topic this weekend, but since I'm here...

You can no longer get the top toolbar. Why? Well, because it doesn't exist. ExtJs 3.x changed their implementation of the grid, and the grid config would require an entry to include the top toolbar (even an empty config that didn't display). I posted to the beta about this, but it doesn't look like it made it into the final version. I hope to do some more testing this weekend, after my preso at Barcamp Nashville. If I find a way around this I'll post something for everyone.

Comment 2 by Andy Sandefer posted on 10/15/2009 at 8:57 PM

I'm a big user of these UI controls and I like the enhancements to the cfgrid but the tabs and cfwindow look, and in some cases, act worse then they did in CF8. I'll be moving a lot of the UI in my apps to jQuery.

Comment 3 by Steve &aposCutter&apos Blades posted on 10/15/2009 at 9:58 PM

@Andy

While I can understand your frustration, I have to mirror something Ray mentioned in his post: if you go 'off the ranch', you should use the library itself.

The cfform functionality has always been a "quick fix" solution, for those without the skills or to just rapidly prototype something.

ExtJs is still, by far, the largest consistent component library available, and 3.x brought greater cohesion and extended functionality. For anyone looking to maintain that ability of rapid prototyping, I would suggest that you seriously look at what's available to you within a full ExtJs implementation.

Incidentally, it's been previously stated that the ExtJs license carries over for your use, as long as it's in conjunction with ColdFusion.

Comment 4 by Kumar posted on 10/15/2009 at 10:02 PM

getBottomToolbar() and getTopToolbar() will take care of getting the relevant toolbars and and you can then add buttons to them.

Comment 5 by Henry Ho posted on 10/16/2009 at 12:16 AM

see: Use cfajaximport to help with CF8 to CF9 migration
http://samfarmer.instantspo...

Comment 6 by Aaron posted on 10/16/2009 at 12:24 AM

We're using CF8 right now and I just got into CFAJAXPROXY, but we had to scrap it because it seems that the code CF8 outputs invalidates our XHTML 1.0. I'm both surprised at Adobe for not adhering to XHTML output (for those who value it like myself) and upset that they never released a hotfix to address this. I really like the features CFAJAXPROXY had to offer, but if it invalidates me code, it goes out the door.

Comment 7 by Chris posted on 10/16/2009 at 2:07 AM

I'm with Andy. I've jumped on the jQuery bandwagon and have foregone all CF Ajax UI built in functions. Makes life easier for me.

Comment 8 by Raymond Camden posted on 10/16/2009 at 3:10 AM

@Aaron: Interesting - what exactly does cfajaxproxy output that is invalid? It should be just outputting JavaScript.

Comment 9 by Brad Wood posted on 10/16/2009 at 3:35 AM

@Aaron: If your output doesn't have a <head> tag ColdFusion will stick the output of the CFAjaxProxy tag at the top of the page. Is that your problem with the invalid XHMTL?

Like Ray said, all that tag outputs is four <script type="text/javascript"> tags so I'm not sure how that would invalidate your XHTML.

~Brad

Comment 10 by Curt Gratz posted on 10/28/2009 at 7:10 PM

You can replace your code that is something like this

var gridHead = grid.getView().getHeaderPanel(true);
var tbar = new Ext.Toolbar(gridHead);

With just this...

var tbar = grid.getBottomToolbar(); OR var tbar = grid.getTopToolbar(); depending on which one your adding buttons too.

Another change to note is that you will need to change

var record = grid.getSelections();

to...

var record = grid.getSelectionModel().getSelected();

to get the selected row.

Because of this change. You can now reference the data directly and don't need the array notation as before IE...

var ID = record[0].data.ID

becomes just

var ID = record.data.ID

Hope this helps anyone who has this issue.

Comment 11 by Mark posted on 11/7/2009 at 1:21 AM

It would appear that getTopToopbar() does not work, but getBottomToolbar does.

Comment 12 by Ben Andersen posted on 2/4/2010 at 3:01 AM

After much frustration and hair pulling, I found a solution that will give you the same look as the custom toolbars available in CF8, including matching the width of the grid.

I created a div called 'aboveGrid' right before the cfgrid, and then put this in my javascript:

grid = ColdFusion.Grid.getGridObject("userGrid");

var tb = new Ext.Toolbar({
renderTo: document.getElementById('aboveGrid'),
width: document.getElementById(grid.id).width,
items: [
{ text:"Add User", cls:"x-btn-text-icon", icon:"images/add.png", handler:addU },'-',
{ text:"Delete User", cls:"x-btn-text-icon", icon:"images/del.png", handler:delU },'-',
{ cls:"x-btn-text-icon", icon:"images/refresh.png", handler:refreshUserGrid }
]
});

Comment 13 by Steve Caldwell posted on 2/9/2010 at 8:20 PM

I think I found another Ext change that breaks some existing blog posts.

http://www.danvega.org/blog...

Above post describes using the grid.getDataSource() function, but when I try it on my CF9 install, I get a js error
'Error: Object doesn't support this property or method'

Looking at the Ext docs for 3.1, the grid.getDataSource is gone.

gridOptions = function() {
grid = ColdFusion.Grid.getGridObject('docs_grid'); //which grid?
grid.addListener("rowclick", showInfo);
}

showInfo = function(grid, rowIndex, e) {
var record = grid.getDataSource().getAt(rowIndex);
$("#info").show();
};

Haven't dug in to find an alternative yet.

Comment 14 by Ron Lebfrom posted on 2/18/2010 at 5:36 AM

getDataSource() has been changed to getStore()

EXT 1.1
var row = grid.getDataSource().getAt(rowIndex);
EXT 3.x
var row = grid.getStore().getAt(rowIndex);

Full Example:
var GetImageInfo = function(grid,rowIndex,e){
var row = grid.getStore().getAt(rowIndex);

var imageID = row.data.IMAGE_ID;

}

Hope this helps

Ron

Comment 15 by Shawn posted on 3/10/2010 at 1:44 AM

I have a combo box location in the top toolbar that I would like to get working with the most recent update.

Unfortunately after the line, "var tbar = grid.getTopToolbar();" tbar is coming back as "undefinded"

What am I missing (Thanks!)?

function init(){
var grid = ColdFusion.Grid.getGridObject("grdProviderList");
//var gridHead = grid.getView().getHeaderPanel(true);
//var tbar = new Ext.Toolbar(gridHead);
var tbar = grid.getTopToolbar();

cb = new Ext.form.ComboBox({
id:"titleFilter",
emptyText:"Filter Page By Title",
mode:"local",
triggerAction:"all",
displayField:"text",
valueField:"value",
store:new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
["DDS","DDS"],
["DMD","DMD"],
["RDH","RDH"]
]
})
});

cb.addListener("select",function(combo,record,index){
var state = record.data.value;
//filter the records
grid.getDataSource().filter("DOCTORTITLE",state);
});

Ext.fly(tbar.addSpacer().getEl().parentNode).setStyle('width', '100%');
tbar.addButton({
text:"Remove Filter",
icon:"plugin.png",
cls:"x-btn-text-icon",
tooltip:"Remove Filter",
handler:removeFilter
});
tbar.add(new Ext.Toolbar.Separator());
tbar.add(cb);
}
function removeFilter(){
store = grid.getDataSource()
//remove the data filter
store.clearFilter();
//clear the value of the combo box
cb.clearValue();
//reset it so empty text shows up
cb.reset();
}
</script>

Comment 16 by Raymond Camden posted on 3/10/2010 at 1:48 AM

When you checked the most recent Ext docs, what did it say to use in order to get the toolbar?

Comment 17 by Shawn posted on 3/10/2010 at 2:03 AM

In 3.1.1 I see getTopToolbar(); but I do not see where the doc say "do this" to get the top toolbar.

Am I missing something obvious?

Comment 18 by Raymond Camden posted on 3/10/2010 at 2:34 AM
Comment 19 by Ben Andersen posted on 3/10/2010 at 3:44 AM

I could be incorrect (maybe it was added back in for 3.1.1), but I believe the top toolbar has been removed from the Ext grid, and is no longer available. The getTopToolbar function is still in the Ext 3.0 documentation, but I could never get it to work and found many examples of other people not being able to get it to work.

I found a way around this by creating a standalone toolbar that sits on top of the grid, that will for all visual and functional purposes be the same as the one previously provided by grid.getTopToolbar(). I provided some code back in comment 12, but failed to provide a good explanation. Let me know if you have any questions.

Comment 20 by Ron Lebfrom posted on 3/23/2010 at 1:21 AM

There is a bug with the getTopToolbar();
The bug is 82064

You will have to work with getBottomToolbar();

Here is an example:
var initcssgrid = function(){
grid = ColdFusion.Grid.getGridObject("SiteCSSGrid");
grid.addListener("rowclick",showattachedwebpages);
//getTopToolbar is broken per Adobe bug 82064
var tbar = grid.getBottomToolbar();

tbar.addButton({
text:"Add File To Webpage",
icon:"images/icons/add.png",
cls:"x-btn-text-icon",
tooltip:"Add File To Webpage",
handler:AddCSSFILE
});
tbar.add(new Ext.Toolbar.Separator());
tbar.addButton({
text:"Remove CSS File",
icon:"images/icons/delete.png",
cls:"x-btn-text-icon",
tooltip:"Remove CSS File",
handler:deleteSiteCSSFile
});
}

Comment 21 by Ron Lebfrom posted on 3/23/2010 at 1:24 AM

getTopToolbar(); Bug 82064 FIXED

The bug entered on Thursday, February 11, 2010 has been marked fixed by Adobe ColdFusion development.

(If this email is addressed to you directly, you've logged this bug. Otherwise, you've subscribed to this bug through the Adobe ColdFusion beta site and are receiving a BCC.)

Product Area: AJAX UI Components
Severity: 6 - Low (Easy workaround & only affects small group)

Fixed In: ColdFusion 9.0.1 ,Beta 1, Build 270832

Description: Using the HTML cfgrid the getTopToolbar() does not workvar tbar = grid.getTopToolbar(); // returns undefinedvar bbar = grid.getBottomToolbar(); //WorksA lot of developers are having problems:https://www.extjs.com/forum... 11:http://www.coldfusionjedi.c...

Comment 22 by Jeff Sorte posted on 4/7/2010 at 10:16 PM

Thanks for this article and the updates on the bug fix. A couple of questions:

1) Is the fix available yet? If so, where can I get it?

2) What is the site/url for Adobe's CF bug tracking so I can subscribe to bugs and get updates?

Thanks for any assistance.

Comment 23 by Raymond Camden posted on 4/7/2010 at 10:40 PM

You can view Adobe's public CF bug tracker here:

http://cfbugs.adobe.com/cfb...

Comment 24 by Daniel Fredericks posted on 5/5/2010 at 8:40 PM

anyone have any ideas where I can find examples of CFGrid and various things you can do with the grid? I am working with Checkboxes in a column, and I need to create a separate select all, select none button (can't figure out how to reference the value of each checkbox). With these new changes, I have no idea if the code I am finding by looking up EXTJS grid exmples are right or if they were created in an older version.
Any help with examples or my issue would be great...

Comment 25 by Raymond Camden posted on 5/6/2010 at 9:04 PM

Try searching for cfgrid on cfbloggers.org.

Comment 26 by Laurens posted on 7/6/2010 at 12:22 PM

@Curt Gratz:
Thanks, this solves exactly the problem I had with a grid I used in CF8 that broke in CF9. Great!

Comment 27 by Stephen Cozzolino posted on 10/1/2010 at 7:45 PM

Hello,

This appears to be related to this article. I found this piece of code that I have been using in CF8 successfully. Now that I moved to CF9, I'm getting a javascript error. Apparently, I cannot just reference Ext. as I was in CF8. Does anyone know how I'm supposed to instantiate the Ext object to make this function work?

function sessionEnd() {
ColdFusion.Window.hide('winSession');
ColdFusion.Window.show('winSessionEnd');
var wob = ColdFusion.Window.getWindowObject('winSessionEnd');
Ext.DialogManager.bringToFront(wob);
}

Thank you.

Comment 28 by Jenny Mostert posted on 10/21/2010 at 1:00 AM

Thanks Ray, Curt and Ben. I'm in the middle of migrating our sites to SQL 2008 and CF 9. This was one of the few issues I've run into during the move. I was really excited to find all of the answers to my grid questions on one page. Thanks again for taking the time to post your findings.

Comment 29 by David posted on 9/19/2012 at 11:52 PM

Shawn or Raymond, did you ever find a comobobox that would work with CF9's cflayout? All my CMS features utilizing cflayout & cflayoutarea fell apart when I upgraded from CF8 to CF9. I am still looking for answers. For that fact, has anyone found a combobox that will work or a way to reverse the Ajax from CF9 to function like it did with CF8?

Comment 30 by Raymond Camden posted on 9/20/2012 at 1:41 AM

You would need - afaik - to use Ext 'naked', ie, without cflayout, to use an earlier version.

Comment 31 by Richard Migambi posted on 10/18/2012 at 3:09 PM

@Ben Andersen - this helped me...your solution works great! Adobe should really make these things much clearer!!!