Posted in ColdFusion | Posted on 10-15-2009 | 7,838 views
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.
2var grid = ColdFusion.Grid.getGridObject('maingrid');
3var gridHead = grid.getView().getHeaderPanel(true);
4var 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.
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.
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.
http://samfarmer.instantspot.com/blog/2009/08/14/U...
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
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.
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 }
]
});
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.
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
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>
Am I missing something obvious?
http://www.extjs.com/forum/showthread.php?p=407991...
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.
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
});
}
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...
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.
http://cfbugs.adobe.com/cfbugreport/flexbugui/cfbu...
Any help with examples or my issue would be great...
Thanks, this solves exactly the problem I had with a grid I used in CF8 that broke in CF9. Great!
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.
[Add Comment] [Subscribe to Comments]