I just came across this issue and thoughts its best to do a quick post for future reference. If you happen to use ExtJs (which is a great JS library by the way, apart from the recent license issues) , and if you have a Ext Grid on your page, you might run into the following issue.
The issue is, the grid column headers sometimes disappear as you mouseover some data rows. In my case, I was using some lightbox images in one of the grid cells and as soon as lightbox image popped up, the grid headers would mysteriously disappear. Because it happened only in IE6, I knew who to blame , straight away. But fortunately, a quick search on the forums revealed a nice and easy fix to the problem.
In your css, you just need to add the following one line of code :-
[css]
<style type="text/css">
.x-grid3-header-offset {width: auto;}
</style>
[/css]
Once thats added, you are done. IE6 would now keep the headers. Sweet!
Hi,
Thanks for this useful tip!
I’m about to buy a ExtJS license myself and I’m curious to know what recent license issues are you talking about. Can you be more specific? Thanks again.
@Salvo, I havent really followed up on the license issue, but from my understanding, the latest version 2.1 is released under GPL, whcih by its nature, is more restrictive in nature. I am only using versions prior to 2.1 because they were all under LGPL which makes it free to use, ditribute etc.
More details can be found here on the 74 page thread. http://extjs.com/forum/showthread.php?t=33096
I’ve only really used the qQuery library before. Where does ExtJS stand in relation to this – is it complementary or an alternative?
@Graham, ExtJs is more UI oriented, I would say. And it surely does eveyrthing that any other JS library would do plus s bit more. Its worth a try http://www.extjs.com
Thanks a lot!!!
I tried the css commands above but the add and delete buttons on the top of my grip disappear any time I incude the grid in any template with css. However, they show up fine if I load the grid code into an empty template. Any ideas?
Hi Bud, I think the css for the grid is being overwritten by your other css. Can you make sure there are no same style elements by looking at the ‘view source’ of your generated page? or may be use firebug ?
thanks buddy..u rocks
Anuj, I found my problem. The image dispappears when I use the onrequest function in my application.cfc. The only way I found around it was to not use an application cfc. Have you experienced similar problems?
@Bud, maybe this might help you.
http://corfield.org/blog/index.cfm/do/blog.entry/entry/Applicationcfc__onRequest_and_CFCs
Anuj,
Thanks for the article on the on request function. I have a different question – I am displaying an image in an ext grid and was wondering if there is a way to use lightbox with the grid. I use a custom cell renderer to display the image and was wondering how to invoke lightbox with the renderer.
function formatGrid(){
theGrid = ColdFusion.Grid.getGridObject(“ItemGrid”);
colModel = theGrid.getColumnModel();
//0 because the array of columns starts at index 0; thus, column 1 is index 0, and column 3 is index 2
colModel.setRenderer(15,imageCellRenderer);//custom renderer
colModel.setRenderer(8,Ext.util.Format.usMoney);//built-in Money renderer
colModel.setRenderer(9,Ext.util.Format.usMoney);//built-in Money renderer
theGrid.reconfigure(theGrid.getDataSource(),colModel);
}
function imageCellRenderer(data,cell,record,row,col,store){
return String.format(”,data)
Bud, that should be an easy one. You only need to write the html to the grid inside the custom renderer. Have you tried that?
Anuj, now I am embarrassed since it should be easy. I referenced Links Inside Grid Cells Option 1 on this page http://extjs.com/learn/Ext_FAQ_Grid#Selecting_a_row_in_grid_once_rendered
but with little success.