Hide Grid Header

[torvad]

[Solved - please ignore my post]

Hi,
how do you implement this with 1.1 of the Ext, when the function getGridEl() is not around anymore?

I've tried to get the element and then add the style to it.

var el = Ext.DomQuery.selectNode("div[@id='myGridId'] div[@class='x-grid-header']");
el.style.display="none";

My div structure looks like this:
<div id='myGridId'>
<div...>
<div...>
<div class='x-grid-header'>

[rost]

I have a grid which is heavily reused in many views of the app, with and without the header. I needed it to be configurable from the outside, so in my MyGridPanel class I've set a variable:

showGridHeader: false // do not display grid header by default

The following code adds CSS class to hide the grid in initComponent method:

if (!this.showGridHeader) {
    this.addClass('grid-no-header');
}

In CSS, I have following:

.grid-no-header .x-grid3-header
{
    display: none; 
}

So now all grids will have no headers by default but I can easily make a particular grid instance to have the header by setting it's public showGridHeader property to true. I hope this will help someone ;)

[abhranilnaha]

When I am trying to execute the above code, it is hiding the header but in IE it is showing scrollbars in the grid. I think it is not able to set the width of the grid properly. How can I fix this problem?
If I set hideHeaders to true in grid config then this scrollbar problem is gone and also it hides the header in IE but my grid is not able to load data in firefox. The grid store has data but still my grid in empty in firefox. My grid is inside a tabpanel in Ext 3.0. Does anybody know why hideheaders is causing problem in firefox for tabpanel?

[aswinramakrish]

I was having this issue. This is what I did.

grid.on('afterlayout', function (comp) {
                if(comp.header)
                    comp.header.setStyle('display', 'none');                
            });

The mistake that I was doing was:

grid.on('afterlayout', function (comp) {
                if(grid.header)
                    grid.header.setStyle('display', 'none');                
            });

Hope it helps!

[felix41382]

Since ExtJs 4 this is done by:

hideHeaders: true