Hiding ExtJS Grid Column header thru javascript

Question

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

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

But i dont want to use any CSS change. How to do the same useing javascript?

Answer 1

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.