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.
Archived Comments
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.
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.
@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.
getBottomToolbar() and getTopToolbar() will take care of getting the relevant toolbars and and you can then add buttons to them.
see: Use cfajaximport to help with CF8 to CF9 migration
http://samfarmer.instantspo...
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.
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.
@Aaron: Interesting - what exactly does cfajaxproxy output that is invalid? It should be just outputting JavaScript.
@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
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.
It would appear that getTopToopbar() does not work, but getBottomToolbar does.
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 }
]
});
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.
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
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>
When you checked the most recent Ext docs, what did it say to use in order to get the toolbar?
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?
Could this be it?
http://www.extjs.com/forum/...
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.
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
});
}
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...
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.
You can view Adobe's public CF bug tracker here:
http://cfbugs.adobe.com/cfb...
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...
Try searching for cfgrid on cfbloggers.org.
@Curt Gratz:
Thanks, this solves exactly the problem I had with a grid I used in CF8 that broke in CF9. Great!
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.
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.
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?
You would need - afaik - to use Ext 'naked', ie, without cflayout, to use an earlier version.
@Ben Andersen - this helped me...your solution works great! Adobe should really make these things much clearer!!!