Hiding ExtJS Grid Column header

11
votes

I understand I can hide grid column header using the code.

#gridid .x-grid3-hd-row { display:none; }

But I don't want to use any CSS change. How to do the same using JavaScript?

5
javascriptextjs

5 Answers

20
votes

you can do it easily with adding this to Ext.grid.GridPanel to this way :

hideHeaders: true
11
votes

You can set the hideHeaders configuration option of the GridPanel to true. Or do you mean after the grid is rendered?

Edited: If you want to change (or disable) the way the header is created, you could also override renderHeaders or updateHeaders from GridView. Another way might be to pass a templates option to the GridView, with the header value set to an empty template instead of the default:

ts.header = new Ext.Template(
    '',
    '{cells}',
    '
'
);

Although the default implementation writes the header in this.innerHd, and innerHd is defined as this.mainHd.dom.firstChild, and this.mainHd is set to hidden if if hideHeaders option is set. So I would expect that option would affect the column headers too.

Edited: What version of ExtJS are we talking about? I looked at the current source, which is 3.1 I guess.

6
votes

just add hideHeaders: true to your grid. it should work

4
votes

You can add this to your grid definition:

listeners: {
    render: function(grid) {
        grid.getView().el.select('.x-grid3-header').setStyle('display', 'none');
    }
},
0
votes

Usually you end up wanting this when you put your grid into a panel.

For me the css hacks seemed bad and only this worked:

preventHeaders: true

See the property here in the docs.