Raymond Camden's ColdFusion Blog: Warning to Ajax users in ColdFusion 9

Warning to Ajax users in ColdFusion 9

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.

view plain print about

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

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

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.

This entry was posted on Thursday, October 15, 2009 at 11:22 AM. It was filed in the following categories: ColdFusion, AJAX. It has been viewed 4,426 times and has 26 comments.

TweetBacks

Comments

[Add Comment] [Subscribe to Comments]

Comment 1 written by Steve 'Cutter' Blades on 15 October 2009, at 11:41 AM

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 written by Andy Sandefer on 15 October 2009, at 11:57 AM

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 written by Steve 'Cutter' Blades on 15 October 2009, at 12: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 written by Kumar on 15 October 2009, at 1:02 PM

getBottomToolbar() and getTopToolbar() will take care of getting the relevant toolbars and and you can then add buttons to them.
Comment 5 written by Henry Ho on 15 October 2009, at 3:16 PM

see: Use cfajaximport to help with CF8 to CF9 migration
http://samfarmer.instantspot.com/blog/2009/08/14/U...
Comment 6 written by Aaron on 15 October 2009, at 3:24 PM

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 written by Chris on 15 October 2009, at 5:07 PM

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 written by Raymond Camden on 15 October 2009, at 6:10 PM

@Aaron: Interesting - what exactly does cfajaxproxy output that is invalid? It should be just outputting JavaScript.
Comment 9 written by Brad Wood on 15 October 2009, at 6:35 PM

@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 written by Curt Gratz on 28 October 2009, at 10:10 AM

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 written by Mark on 6 November 2009, at 2:21 PM

It would appear that getTopToopbar() does not work, but getBottomToolbar does.
Comment 12 written by Ben Andersen on 3 February 2010, at 4:01 PM

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 written by Steve Caldwell on 9 February 2010, at 9:20 AM

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

http://www.danvega.org/blog/index.cfm/2008/3/20/CF...

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 written by Ron Lebfrom on 17 February 2010, at 6:36 PM

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 written by Shawn on 9 March 2010, at 2:44 PM

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 written by Raymond Camden on 9 March 2010, at 2:48 PM

When you checked the most recent Ext docs, what did it say to use in order to get the toolbar?
Comment 17 written by Shawn on 9 March 2010, at 3:03 PM

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 written by Raymond Camden on 9 March 2010, at 3:34 PM

Could this be it?

http://www.extjs.com/forum/showthread.php?p=407991...
Comment 19 written by Ben Andersen on 9 March 2010, at 4:44 PM

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 written by Ron Lebfrom on 22 March 2010, at 4:21 PM

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 written by Ron Lebfrom on 22 March 2010, at 4:24 PM

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/showthread.php?p=40799... 11:http://www.coldfusionjedi.com/index.cfm/2009/10/15...
Comment 22 written by Jeff Sorte on 7 April 2010, at 1: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 written by Raymond Camden on 7 April 2010, at 1:40 PM

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

http://cfbugs.adobe.com/cfbugreport/flexbugui/cfbu...
Comment 24 written by Daniel Fredericks on 5 May 2010, at 11:40 AM

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 written by Raymond Camden on 6 May 2010, at 12:04 PM

Try searching for cfgrid on cfbloggers.org.
Comment 26 written by Laurens on 6 July 2010, at 3:22 AM

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