ExtJs : Disappearing Grid Headers in IE6

On July 17, 2008, in Javascript, Browsers, by Anuj Gakhar

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 :-


<style type="text/css">
.x-grid3-header-offset {width: auto;}

Once thats added, you are done. IE6 would now keep the headers. Sweet!


13 Responses to ExtJs : Disappearing Grid Headers in IE6

  1. salvo says:

    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.

  2. Anuj Gakhar says:

    @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

  3. Graham says:

    I’ve only really used the qQuery library before. Where does ExtJS stand in relation to this – is it complementary or an alternative?

  4. Anuj Gakhar says:

    @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

  5. Igor says:

    Thanks a lot!!!

  6. Bud Hines says:

    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?

    • Anuj Gakhar says:

      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 ?

  7. Inam says:

    thanks buddy..u rocks

  8. Bud Hines says:

    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?

  9. Bud Hines says:


    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

    function imageCellRenderer(data,cell,record,row,col,store){
    return String.format(”,data)

  10. Anuj Gakhar says:

    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?

  11. Bud Hines says:

    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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2011 Anuj Gakhar